Menu utilisateur Fade in et out lors du vol stationnaire

J'ai des menus utilisateur qui ont besoin d'apparaître et de disparaître en passant la souris et en sortant d'une icône. Mon problème est que l'utilisateur devrait également être capable de survoler le menu (ou img dans ce cas) et ne pas avoir le menu disparaître afin qu'ils puissent cliquer sur les liens ou l'image à l'intérieur. Voici mon code et un jsfiddle. http://jsfiddle.net/anschwem/7mrM2/Menu utilisateur Fade in et out lors du vol stationnaire

<style> 
div.notif 
{ 
    display:none; 
    position:absolute; 
    border:solid 1px black; 
    padding:8px; 
    background-color:white; 
} 
a.notif:hover + div.notif 
{ 
    display:block; 

} 
div.notif:hover 
{ 
    display:block; 

} 
</style> 
<script type='text/javascript'>//NOT WORKING 
$(window).load(function(){ 
$(document).ready(function() 
{  
    $(".notif").hover(
     function() { 
     $('.notif').fadeIn('slow'); 
     }, 
     function() { 
     $('.notif').fadeOut('slow'); 
     } 
    ); 
}); 
});//]]> 
</script>//NOT WORKING 
</head> 
<body> 
<a class="notif" href="notifications.html" style="text-decoration:none;"><img src="images/bubble.png" style="position:relative; top:20px;"/></a> 
    <div class="notif" style="z-index:999999; "> 
<a href="notifications.html"><img src="images/notif.png"/></a> 
</body>

Source

2013-01-23 triplethreat77

lien les images du violon à partir du site. Travailler avec des images brisées n'est pas facile ... De plus, dans jsFiddle, vous devez définir jQuery comme framework. [Mise à jour du violon] (http://jsfiddle.net/DJDavid98/7mrM2/1/) – SeinopSys

Vous ne pouvez pas planer sur quelque chose qui n'est pas hoverable. 'fadeOut' se termine par' display: none' !!! A partir de ce moment, qu'est-ce que vous planez pour que ça se fane? Rien! – kidwon

Je peux enlever le code qui apparaît ou disparaît, j'ai juste pensé que ce serait utile. Je l'ai déjà utilisé, juste quand vous survolez le menu (récemment passé), il disparaît parce que vous avez quitté l'icône pour vous concentrer sur le menu. – triplethreat77

Ceci va vous aider. Voir JSFiddle demo

HTML

<div class='parent'> 
    <a class="notif" href="notifications.html" style="text-decoration:none;"><img src="http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" height="30" width="30"/></a> 

    <div class="notif" style="z-index:999999; "> 
     <a href="notifications.html"><img src="http://doinghistoryproject.tripod.com/sitebuildercontent/sitebuilderpictures/failure-message.gif" height="80" width="80"/></a> 
    </div> 
</div>

$(document).ready(function() { 
    $(".parent").hover(
    function() { 
     $(this).find('div.notif').stop().fadeIn('slow'); 
    }, 
    function() { 
     $(this).find('div.notif').stop().fadeOut('slow'); 
    }); 
});

Source

2013-01-23 17:57:15 Wolf

Wolf! On se revoit. Cela fonctionne très bien, avec un seul menu de vol stationnaire. Et si je veux disons 3? Si vous en ajoutez plusieurs, avec des identifiants différents, ils se convoqueront. Étrange. – triplethreat77

pouvez-vous mettre à jour le violon pour répliquer ce cas? – Wolf

Eh bien, j'ai copié ce que vous avez et vous pouvez voir qu'ils sont glitchy .http: //jsfiddle.net/anschwem/7mrM2/12/ – triplethreat77

Menu utilisateur Fade in et out lors du vol stationnaire

Répondre

Questions connexes