用户菜单在悬停时淡入和淡出

Question

I have user menus that need to fade in and out on the mouse over and mouse out of an icon. 我的用户菜单需要在鼠标悬停和鼠标悬停图标上淡入和淡出。 My problem is that the user should also be able to hover over the menu (or img in this case) and not have the menu fade out so that they can click on the links or image within. 我的问题是用户还应该能够将鼠标悬停在菜单（在本例中为img）上，而菜单不会淡出，以便用户可以单击其中的链接或图像。 Here is my code and a jsfiddle. 这是我的代码和一个jsfiddle。 http://jsfiddle.net/anschwem/7mrM2/ 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>

Answer 1

This will help you. 这将为您提供帮助。 See JSFiddle demo 参见JSFiddle演示

HTML 的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 JS

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

用户菜单在悬停时淡入和淡出

问题描述

1 个解决方案

解决方案1
0 2013-01-23 17:57:15

用户菜单在悬停时淡入和淡出

问题描述

1 个解决方案

解决方案1 0 2013-01-23 17:57:15

解决方案1
0 2013-01-23 17:57:15