elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Como proteger una cartera - billetera de Bitcoin


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Como hacer un transform al mover el mouse fuera del elem. con un selector css3
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como hacer un transform al mover el mouse fuera del elem. con un selector css3  (Leído 2,729 veces)
Drakaris

Desconectado Desconectado

Mensajes: 286


Todo lo que puedas imaginar, lo puedes crear.


Ver Perfil
Como hacer un transform al mover el mouse fuera del elem. con un selector css3
« 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 .
Código:
 .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.


En línea

Lo increible, no es lo que ves, sino como es
engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: Como hacer un transform al mover el mouse fuera del elem. con un selector css3
« Respuesta #1 en: 8 Octubre 2017, 01:09 am »

usualmente suele funcionar con
Código:
:not:hover

pero creo que depende del navegador


En línea

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

Desconectado Desconectado

Mensajes: 286


Todo lo que puedas imaginar, lo puedes crear.


Ver Perfil
Re: Como hacer un transform al mover el mouse fuera del elem. con un selector css3
« Respuesta #2 en: 9 Octubre 2017, 22:23 pm »

usualmente suele funcionar con
Código:
: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?
En línea

Lo increible, no es lo que ves, sino como es
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Guia Como hacer para mover el mouse y hacer click
Programación Visual Basic
gmf_321 7 8,255 Último mensaje 4 Enero 2007, 18:39 pm
por Sancho.Mazorka
Manual Como hacer para mover el mouse y hacer click en vb
Programación Visual Basic
gmf_321 1 11,319 Último mensaje 24 Septiembre 2006, 17:41 pm
por Dahmer
Clickear sin mover mouse « 1 2 3 4 »
Programación Visual Basic
BahiereTTi 33 15,154 Último mensaje 28 Agosto 2011, 21:50 pm
por BlackZeroX
mover imagen con el mouse
Java
bengy 6 8,071 Último mensaje 16 Septiembre 2012, 16:08 pm
por bengy
¿Como Mover Objetos Con El Mouse (allegro en codeblocks)?
Programación C/C++
MaUrOx970909 1 2,819 Último mensaje 25 Octubre 2017, 18:08 pm
por Maurice_Lupin
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines