web-dev-qa-db-fra.com

Survolez un élément caché pour le montrer

Est-il possible de survoler un élément déjà caché? J'essaie d'imiter ce que Steam fait avec leur navigation par flèches sur leur page d'accueil. Vous remarquerez que lorsque vous accédez à la page pour la première fois, aucune flèche ne s'affiche:

enter image description here

Ensuite, lorsque vous survolez la zone où devrait se trouver une flèche, celle-ci s’affiche:

enter image description here

J'ai essayé de régler mes divs contenant les images de flèche sur display: none et j'ai également essayé visibility: hidden mais aucune ne semble fonctionner avec les méthodes de survol ou de survol de la souris dans jQuery. J'aurais pensé que visibility: hidden le ferait fonctionner, mais cela ne semble pas être le cas. Existe-t-il un autre moyen de cacher ces divs dès le début, tout en pouvant faire en sorte que des événements survolés fonctionnent?

javascriptjquerycssevents
21
Aaron

Réglez-le à l'opacité zéro à la place:

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

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

31
Blazemonger

Vous ne pouvez pas survoler un élément invisible ou un élément non affiché. Vous pouvez survoler un élément visible, puis l'utiliser pour afficher un autre élément précédemment masqué. Vous pouvez également survoler un élément transparent et le rendre opaque.

Voici un exemple de technique d'opacité utilisant uniquement CSS, cela fonctionnerait également avec le survol de jQuery.

CSS: 

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

#it:hover {
    opacity: 1;
}

Voici un exemple montrant un élément quand un autre est survolé:

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();
});
10
Adam

Utilisez la méthode .fadeTo jQuery pour modifier l'opacité de l'élément en état de survol.

Le site jQuery contient un exemple mais cela devrait suffire

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

Depuis la page jQuery Hover .

6
msarchet

Vous pouvez le définir sur opacity: 0.

Afin de le rendre multi-navigateur, vous voudrez probablement le faire avec jQuery tho.

4
Filip

Une solution consiste à utiliser un div test alternatif, tel qu’il n’a pas de contenu, mais lorsqu’il survole, il affiche le div "flèche". Lorsque le div "arrow" (ou le div de test de frappe) est quitté, le div "arrow" est à nouveau masqué.

Vous pouvez également utiliser le même div pour le test de sélection et la "flèche", de sorte qu'une image d'arrière-plan soit utilisée pour les éléments visuels du div. Une fois survolé, vous pouvez indiquer au décalage de l’image de se positionner sur la "flèche". Une fois quitté, vous définissez le décalage de l'arrière-plan sur une position où l'image de la flèche ne serait plus affichée.

Enfin, si le contenu doit toujours se trouver à la même position que la zone de test, vous pouvez définir l'opacité de la div sur zéro et basculer en conséquence.

1
cwharris

Vous pouvez définir l'opacité des éléments sur 0. Cela leur permettrait de recevoir les événements survolés (en fait, mouseenter et mouseleave), mais en pratique, les rendre invisibles aux utilisateurs.

0
dgvid