Question

我使用下面的代码来淡化菜单的淡出效果。

目前它正在为鼠标悬停菜单提供淡入淡出效果。请点击以下链接 http://www.queness.com/resources/html/fadein/index.html

但我的要求是，当我在特定菜单上鼠标悬停时，所有其他菜单应该获得淡入淡出效果但不会悬停菜单（悬停菜单不应该产生任何效果）。

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>

<script type="text/javascript">    
//<![CDATA[   
$(document).ready(function () {    
    //Append a div with hover class to all the LI
    $('#navMenu li').append('<div class="hover"><\/div>');
    $('#navMenu li').hover(     
        //Mouseover, fadeIn the hidden hover class  
        function() {            
            $(this).children('div').stop(true, true).fadeIn('1000');    
        }, 
            //Mouseout, fadeOut the hover class
        function() {

            $(this).children('div').stop(true, true).fadeOut('1000');   
    });    
});    
//]]>
</script>    
<style type="text/css">    
body {
    background:#222;    
}

#navMenu {
    margin:0; 
    padding:0;
    list-style:none;    
    font-family:arial;
    text-align:center;
    line-height:60px;
}

    #navMenu li {
        float:left; 
        background:url(default.jpg) no-repeat center center;    /* default background image */
        width:120px;                            /* width and height of the menu item */
        height:70px;
        border-left:1px solid #111;             /* simulate pixel perfect using border */
        border-right:1px solid #333;
        border-top:1px solid #555;
        border-bottom:1px solid #333;
        position:relative;          /* must set it as relative, because .hover class top and left with absolute position will be positioned according to li.    */
    }

    #navMenu li a {z-index:20;      /* z-index must be higher than .hover class */
        display:block;  /* display as block and set the height according to the height of the menu to make the whole LI clickable   */
        height:70px;
        position:relative;
        color:#777;
    }

    #navMenu li .hover {
        background:url(over.jpg) no-repeat center center;       /* mouseover image  */
        position:absolute;  /* must be postion absolute     */
        width:120px;    /*  width, height, left and top to fill the whole LI item   */
        height:70px;
        left:0; 
        top:0;  
        z-index:0;      /* display under the Anchor tag */
        display:none;   /* hide it by default   */
    }   

    #navMenu li.selected {
        background:url(selected.jpg) no-repeat center center;   /* selected image   */
    }


</style>
</head>
<body>

<ul id="navMenu">
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>
    <li><a href="#">Test 5</a></li>
    <li><a href="#">Test 6</a></li>
</ul>


</body>
</html>

Answer 1

使用兄弟姐妹：

$(this).siblings().each(function() {
  // Code to run for each sibling.
});

Answer 2

尝试此代码....

$('#navMenu li').append('<div class="hover"><\/div>');
    $('#navMenu li').hover(     
        //Mouseover, fadeIn the hidden hover class  
        function() {            
             $('#navMenu li div').stop(true, true).fadeIn('1000');
            $(this).children('div').css("display", "none");    
        }, 
            //Mouseout, fadeOut the hover class
        function() {

            $('#navMenu li div').fadeOut('1000');   
    });

jquery中的fadein淡出效果

2 个答案: