Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: Drakaris en 8 Octubre 2017, 00:08 AM

Título: Como hacer un transform al mover el mouse fuera del elem. con un selector css3
Publicado por: Drakaris en 8 Octubre 2017, 00:08 AM
Hola hice una transición que al estar encima de un logo (:hover), me aparezca un elemento desplazandose de izquierda al centro y lo que querria saber si es que hay algun selector css3 (:hover,:before,:link,etc.) que al dejar de tener el mouse encima del elemento me haga otra transicion .

 .ctl00_ContenidoPagina_ctl06_spnTooltip{
   width: auto;
   height: auto;
   line-height: 100%;
   padding: 5px;
   border: 4px solid #FACC2E;
   border-radius: 5px;
   box-shadow: 1px 1px 2px #A8A8A8;
   background-color: #F5DA81;
   font-family: MV Boli;
   font-size: 1.3vw;
   max-width: 50%;
   text-align: left;
   z-index: 999;
   position: absolute;
   left: -50%;
   opacity: 0;
   display: block;
   bottom: 11vw;
   transition: all 2s ease-in-out;
   -webkit-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out;
   -webkit-animation-name:final;
   -webkit-animation-duration:2s;
   -webkit-animation-delay:5s;
   animation-name: final;
   animation-duration: 1s;
   animation-delay: 5s;
 }
 i:hover + .ctl00_ContenidoPagina_ctl06_spnTooltip{
   width: auto;
   height: auto;
   line-height: 100%;
   padding: 5px;
   border: 4px solid #FACC2E;
   border-radius: 5px;
   box-shadow: 1px 1px 2px #A8A8A8;
   background-color: #F5DA81;
   font-family: MV Boli;
   font-size: 1.3vw;
   max-width: 50%;
   text-align: left;
   z-index: 999;
   position: absolute;
   left: -50%;
   opacity: 1;
   display: block;
   bottom: 11vw;
   transform: translate(150%);
   -webkit-transform: translate(150%);
 }

<i class="fa fa-question-circle" style="font-size: 2vw; color: blue; cursor: help; left:73vw;position:absolute;bottom:8vw;" id="infromacion1"></i>
   <div class="ctl00_ContenidoPagina_ctl06_spnTooltip">
     <font color="#FA5858"><big>Solo para administradores&#58;</big></font> Para a&ntilde;adir un enlace en la tabla, tiene que ir a su curso y grupo.
   </div>

P.D: O meter otro valor en el transform que sea el segundo.
Gracias.
Título: Re: Como hacer un transform al mover el mouse fuera del elem. con un selector css3
Publicado por: engel lex en 8 Octubre 2017, 01:09 AM
usualmente suele funcionar con
:not:hover

pero creo que depende del navegador
Título: Re: Como hacer un transform al mover el mouse fuera del elem. con un selector css3
Publicado por: Drakaris en 9 Octubre 2017, 22:23 PM
Cita de: engel lex en  8 Octubre 2017, 01:09 AM
usualmente suele funcionar con
:not:hover

pero creo que depende del navegador

No me ha funcionado, hay algún otro método, si no se puede de esa manera?