Passa il mouse sopra un elemento nascosto per visualizzarlo

Question

C'è un modo per passare con il mouse su un elemento che è già nascosto. Sto cercando di imitare ciò che Steam fa con la loro navigazione a freccia sulla loro home page. Si noterà che la prima volta che arriva alla pagina, non ci sono frecce che indicano:

Poi, quando si passa sopra l'area in cui ci dovrebbe essere una freccia, si mostra:

ho provato a installare i miei div che contengono le immagini freccia per display: none e hanno anche cercato visibility: hidden ma sembra né a lavorare con le hover o mouseover metodi in jQuery. Avrei pensato che lo visibility: hidden avrebbe funzionato, ma non sembra essere il caso. C'è un altro modo in cui posso nascondere questi div dall'inizio, ma sono ancora in grado di far funzionare gli eventi di hover su di essi?

Answer 1

Set a zero opacità invece:

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

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

Answer 2

Utilizzare il metodo jQuery .fadeTo per modificare l'opacità dell'elemento sul stato hover.

Il sito jQuery contiene un esempio, ma qualcosa di simile dovrebbe essere sufficiente

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

Dalla pagina jQuery Hover.

Answer 3

Si potrebbe impostare a opacity: 0.

Al fine di rendere più cross-browser che probabilmente vorrebbe farlo con jQuery tho.

Answer 4

Un modo per farlo è quello di utilizzare un supplente hit-test di div, in modo tale che essa non ha alcun contenuto, ma quando aleggiava su di essa mostra il div "freccia". Quando il div "arrow" (o il div-hit-hit) viene chiuso, il div "freccia" verrà nuovamente nascosto.

In alternativa, è possibile utilizzare lo stesso div per la hit-test e la "freccia", in modo tale che un'immagine di sfondo viene utilizzato per gli elementi visivi della div. Al passaggio del mouse, è possibile impostare l'offset dell'immagine su una posizione che mostri la "freccia". Quando si esce, si imposta l'offset dello sfondo su una posizione in cui l'immagine della freccia non verrà più visualizzata.

E, infine, se il contenuto si troverà sempre nella stessa posizione dell'area di hit-test, è possibile impostare l'opacità del div su zero e alternare di conseguenza.

Answer 5

è possibile impostare l'opacità degli elementi a 0. che permetterebbero loro di ricevere gli eventi al passaggio del mouse (in realtà MouseEnter e mouseLeave), ma, in pratica, renderli invisibili agli utenti.

Answer 6

Non è possibile posizionare il puntatore del mouse su un elemento invisibile o su un elemento non visualizzato. Puoi passare con il mouse su un elemento visibile e utilizzarlo per mostrare un elemento precedentemente nascosto in precedenza. Oppure puoi passare con il mouse su un elemento trasparente e renderlo 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(); 
});