0

我有需要在鼠标悬停和鼠标移出图标时淡入和淡出的用户菜单。我的问题是用户还应该能够将鼠标悬停在菜单上（或在这种情况下为 img），并且菜单不会淡出，以便他们可以单击其中的链接或图像。这是我的代码和一个jsfiddle。http://jsfiddle.net/anschwem/7mrM2/

<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>
4

1 回答 1

0

这将对您有所帮助。参见JSFiddle 演示

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>

JS

$(document).ready(function () {
    $(".parent").hover(
    function () {
       $(this).find('div.notif').stop().fadeIn('slow');
    },
    function () {
       $(this).find('div.notif').stop().fadeOut('slow');
    });
});
于 2013-01-23T17:57:15.037 回答