Desplácese sobre un elemento oculto para mostrarlo

Question

¿Hay alguna forma de desplazarse sobre un elemento que ya está oculto? Intento imitar lo que Steam hace con su navegación de flecha en su página de inicio. Se dará cuenta de que cuando usted llega a la página, no hay flechas que muestran:

A continuación, cuando se pasa sobre el área donde debería haber una flecha, se manifiesta:

he tratado de establecer mis divs que contienen las imágenes de flecha para display: none y tienen también trató visibility: hidden pero ninguno parece funcionar con los métodos de la libración o pasar el ratón en jQuery. Pensé que visibility: hidden lo haría funcionar, pero ese no parece ser el caso. ¿Hay alguna otra forma en que pueda ocultar estos divs desde el principio, pero aún así ser capaz de tener eventos de desplazamiento sobre ellos?

Answer 1

Set a cero opacidad en su lugar:

$('#blah').hover(function() { 
    $(this).fadeTo(1,1); 
},function() { 
    $(this).fadeTo(1,0); 
}); 

http://jsfiddle.net/mblase75/bzaax/

Answer 2

Utilice el método jQuery .fadeTo para cambiar la opacidad del elemento en estado estacionario.

El sitio de jQuery contiene un ejemplo, pero algo como esto debería ser suficiente

$("element").hover(//On Hover Callback 
        function() {$(this).fadeOut(100);} , 
        //Off Hover Callback 
        function() {$(this).fadeIn(500);}) 

Desde la página jQuery Hover.

Answer 3

Usted puede configurarlo para opacity: 0.

Con el fin de hacer que entre navegadores es probable que le gustaría hacer con jQuery Tho.

Answer 4

Una forma de hacer esto es mediante el uso de un div-prueba de posicionamiento alternativo, de manera que no tiene contenido, pero cuando se cernía sobre ella se muestra la "flecha" div. Cuando se sale de la div "flecha" (o div de prueba), la div "flecha" se oculta una vez más.

Como alternativa, puede utilizar el mismo div para el éxito de la prueba y la "flecha", de manera que una imagen de fondo se utiliza para los elementos visuales de la div. Cuando está suspendido, puede ordenar que el desplazamiento de la imagen se establezca en una posición que muestre la "flecha". Cuando salga, establecerá el desplazamiento del fondo en una posición donde la imagen de la flecha ya no se mostrará.

Y, por último, si el contenido estará siempre en la misma posición que el área de la prueba de posicionamiento, puede establecer la opacidad de la div a cero, y alternar en consecuencia.

Answer 5

También podemos establecer la opacidad de los elementos a 0. Esto les permitiría recibir los eventos de la libración (en realidad MouseEnter y mouseleave), pero como una cuestión práctica, hazlos invisibles para los usuarios.

Answer 6

No puede pasar el ratón sobre un elemento invisible o un elemento no mostrado. Puede pasar el mouse sobre un elemento visible y luego usarlo para mostrar un elemento oculto previamente diferente. O puede colocar el cursor sobre un elemento transparente y hacerlo opaco.

Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.

CSS:

#it { 
    opacity: 0; 
    width: 500px; 
    height:500px; 
} 

#it:hover { 
    opacity: 1; 
} 

Here is an example of showing one element when another is hovered over:

HTML:

<div id="me">Hover over me to display something else</div> 
<div id="else">Something else</div> 

jQuery:

$("#me").hover(function(){ 
    $("#else").show(); 
},function(){ 
    $("#else").hide(); 
});