Como hacer un transform al mover el mouse fuera del elem. con un selector css3

Iniciado por Drakaris, 8 Octubre 2017, 00:08 AM

0 Miembros y 1 Visitante están viendo este tema.

Drakaris

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.
Lo increible, no es lo que ves, sino como es

engel lex

usualmente suele funcionar con
:not:hover

pero creo que depende del navegador
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.

Drakaris

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?
Lo increible, no es lo que ves, sino como es