Simular Hover usando jQuery

Teniendo en cuenta los "botones" existentesSimular Hover usando jQuery

HTML:

<div id="MB"> 
    <ul class="list"> 
     <li id="post-5"><a href="#post-5">5</a></li> 
     <li id="post-4"><a href="#post-4">4</a></li> 
     <li id="post-3"><a href="#post-3">3</a></li> 
     <li id="post-2"><a href="#post-2">2</a></li> 
     <li id="post-1"><a href="#post-1">1</a></li> 
    </ul> 
</div>

CSS:

#MB .list li a { 
     float:left; 
     color:#333; 
     background:#f6f6f6; 
     border:1px solid #eaeaea; 
     border-right:none; 
     padding:0 8px; 
     } 

    #MB .list li a:hover, 
    #MB .list li a:focus { 
     color:#fff; 
     border:1px solid #333333; 
     border-right:none; 
     background:#404040; 
     text-decoration:none; 
     }

me gustaría para simular "asoman" automáticamente en cada botón, de forma secuencial , cada n segundos.

Esto significa que cada n segundos un botón es "cernía" (cambio de color, etc), al siguiente intervalo es "apagado" y el siguiente botón se "enciende" y así sucesivamente ...

Fuente

2011-03-02 Riccardo

#MB .list a:hover, 
#MB .list a:focus, 
#MB .list .active a { 
    /* hover styles */ 
}

(He simplificado sus selectores un poco, me gustaría también sugieren que intenta quitar el exterior div ya que estos son a menudo innecesario y la ul por sí solo es suficiente)

Javascript vuelo estacionario :

function setHover() { 
    if ($('#MB .list .active').next().length) { 
     $('#MB .list .active').next().addClass('active').end().removeClass('active'); 
    } else { 
     $('#MB .list .active').removeClass('active'); 
     $('#MB .list li:first-child').addClass('active'); 
    } 
} 

setInterval(setHover, 1000);

Fuente

2011-03-02 15:16:13 roryf

Estoy siguiendo tu solución. Es lo que estaba buscando. Al ejecutar Firebug, puedo ver que la clase "activa" está asignada a cada elemento "li", haciendo un bucle a través de los elementos de la lista correctamente al intervalo; sin embargo, el estilo no cambia visualmente, creo que debido al elemento interno "a". – Riccardo

¿Has actualizado tu selector de CSS? que aplicará el estilo de desplazamiento a cualquier 'a' que sea un elemento secundario de la clase' .active'. – roryf

Sí, se aplicará a * TODOS * el elemento "a" hijo de la clase "activo" al mismo tiempo ... – Riccardo

Definir un tercer selector como

#MB .list li a: hover, # Mo li .list a: focus, # MB .list a.simFocus li { ... }

y luego agrega y elimina el "simFocu" s "clase basada en el tiempo por código de JavaScript.

Fuente

2011-03-02 15:14:01 fforw

Casi - pero optimice un poco: use solo .simFocus. No cambia la función, pero simplificar los selectores utilizando más nombres en lugar de jerarquías es una muy buena optimización de velocidad. Entonces, en lugar de #elem ul li a.myclass se puede usar .elem-list-link que se usa solo en ese contexto, es decir, en los enlaces (a) debajo de li debajo de ul debajo de id = "elem". –

Yo usaría setInterval y jQuery.trigger('mouseover', …).

Fuente

2011-03-02 15:14:35 kojiro

¡Este enlace aquí le dará el código y las instrucciones para hacerlo!

http://forum.jquery.com/topic/simulate-hover-event

Fuente

2011-03-02 15:15:41 Nikhil

-1

Trate de añadir onclick = "return true" en su enlace de una etiqueta href

<a href="../about.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()" onClick="return true">About us</a>

el onclick = "return true" debe simular un cursor desplazado sobre el entonces salir de la zona de la libración. Eficazmente te da un efecto de vuelo estacionario.

Tenga en cuenta que su dedo tiene que tocar el botón para que se produzca el efecto de desplazamiento, lo que significa que el usuario solo verá el cambio durante uno o dos segundos antes de que el enlace cargue una página.

Fuente

2013-03-30 16:15:28 user2212713

Simular Hover usando jQuery

Respuesta

Cuestiones relacionadas