鼠标滑过有的下拉框选项没有显示背景透明度

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="shopping.js"></script>
    <link rel="stylesheet" type="text/css" href="shopping.css">
</head>
<body>
    <div class="top">
        <div class="content">
            <div class="signIn">
                <span class="normal3">亲，请登录</span>
                <span class="normal1">免费注册</span>
                <span class="normal2">手机逛慕淘</span>
            </div>
            <div class='rightNavContent'>
                  <ul>
                    <li><a href="#">我的慕淘<img class="pic" src="素材/icon/21.png"></a>
                        <div class='innerUl'>
                            <div class='innerLi'>Personal</div>
                            <div class='innerLi'>Group</div>
                            <div class='innerLi'>Administrator</div>
                        </div>
                    </li>
                    <li><a href="#">收藏夹<img class="pic" src="素材/icon/21.png"></a>
                        <div class='innerUl'>
                            <div class='innerLi'>Personal</div>
                            <div class='innerLi'>Group</div>
                            <div class='innerLi'>Administrator</div>
                        </div>
                    </li>
                </ul>

            </div>
        </div>
    </div>
  </body>
</html>

$('.rightNavContent ul li').mouseover(function(){
        var idx = $(this).index();
        $('.innerUl').eq(idx).css('display','block');
    });
    $('.rightNavContent ul li').mouseout(function(){
        var idx = $(this).index();
        $('.innerUl').eq(idx).css('display','none');
    });
    $('.innerLi').mouseover(function(){
        var idx = $(this).index();
        console.log(idx);
        $('.innerLi').eq(idx).css('background','rgba(255,255,255,0.4)');
    });
    $('.innerLi').mouseout(function(){
        var idx = $(this).index();
        $('.innerLi').eq(idx).css('background','none');
    });

*{
    margin:0;
    padding:0;
}
.top{
    width: 100%;
    height:auto;
    background-color: #f3f5f7;
}
.content{
    height: 49px;
    line-height: 50px;
    width: 80%;
    margin:0 auto;
    border-bottom:1px solid gray;
}
.signIn{
    color:red;
    font-size: 5px;
    float:left;
}
.normal,.normal1,.normal2,.normal3{
    color:black;
    cursor: pointer;
}
.signIn span{
    padding-left: 20px;
}
.rightNavContent{
    float:right;
    width:450px;
    height: 49px;
    background: orange;
}
.rightNavContent ul li{
    float:left;
    list-style-type: none;
    line-height: 49px;
    margin-left: 25px;
    font-size: 5px;
    color:#7d7d7d;
}
.innerUl{
    position:absolute;
    width:108px;
    height: 90px;
    background: pink;
    z-index: 888;
    display: none;
}
.innerLi{
    text-align: center;
    height: 30px;
    line-height: 30px;
    width: 108px;
}
.innerLi2{
    text-align: center;
    height: 30px;
    line-height: 30px;
    width: 108px;
}

老师，右面的我的慕淘，收藏夹等等当鼠标滑过时均有下拉框，为什么第二个收藏夹我鼠标滑过下拉框的对应选项的时候，透明度没有显示出来。而我的慕淘那个就可以，他们的class都是同一个啊

qq_诶姆_0 2017-10-25

源自：项目：JQ实现瀑布流 5-2 作业题

收起

3回答

樱桃小胖子 2017-10-25 17:17:24

他们不是兄弟元素，因为不是同一个父级。

$('.rightNavContent ul li').mouseover(function () {
    var idx = $(this).index();
    $('.innerUl').eq(idx).css('display', 'block');
});
$('.rightNavContent ul li').mouseout(function () {
    var idx = $(this).index();
    $('.innerUl').eq(idx).css('display', 'none');
});

这里是设置当鼠标经过每一个在.rightNavContent下面的ul里面的li时，获取当前li的索引，显示li的子元素innerUl,这里跟兄弟元素没有关系，而是父子级元素。

收起回答

好帮手慕糖 2017-10-25 11:44:29

你好，跟这个没有关系哟，鼠标划入对应的，对应的下拉框才会显示哟，“收藏夹”与“我的慕淘”这两个是兄弟元素，所以对于它们下拉框的显示是没有问题的，这里讨论的是，下拉框中innerUL的背景颜色问题哟。这里的主要原因是：

①$(obj).index(this)基于对象选择下标；
②$(this).index()基于this同级所有元素的下标；

$(".innerLi").index(this);就是①的情况是，基于对象选择下标，这个就是在所有的innerLi的元素中选出当前元素的索引。

$(this).index();就是②的情况，这种是基于this同级所有元素的下标；就是在同一父级下选择该元素的索引，

如下图，用②这个获取下面图中红框中的索引的话，就会是1，但是使用①的方式获取的话，会从所有的innerLi的元素中选取（不考虑同级，即是否是用一个父级），这时候获取的到将会是4，你可以自己输出测试下哟

如下，添加背景颜色的语句，是从所有的innerLi的元素中选择对应的索引，添加的透明颜色，没有考虑父级哟，索引这里获取索引的时候，应该使用①的方法就可以了。

祝学习愉快~

收起回答

提问者 qq_诶姆_0 #1

老师你说的这个我已经理解了，我想问的是每个innerUl是不是兄弟元素？如果是的话，每个innerUl的父级元素并不是同一个啊？如果不是兄弟元素 $('.rightNavContent ul li').mouseover(function(){ var idx = $(this).index(); $('.innerUl').eq(idx).css('display','block'); }); $('.rightNavContent ul li').mouseout(function(){ var idx = $(this).index(); $('.innerUl').eq(idx).css('display','none'); }); 这两句怎么又会能执行呢？

2017-10-25 14:08:25

好帮手慕糖 2017-10-25 10:43:09

你好，这个是由于他们的不是兄弟元素（即虽然父级的名字形同，但是不是同一个元素），导致在索引的获取上有误差，如下图，鼠标移入“收藏夹”这一栏是下面的下拉框时，还是“我的慕淘”下的下拉框改变背景颜色，这里有些拗口，可参考下图理解，你可以自己运行下。建议：这里把.innerLi元素中的鼠标移入移出事件中的，获取索引改为：var idx = $(".innerLi").index(this);

这里：$(obj).index(this)基于对象选择下标；

$(this).index()基于this同级所有元素的下标；

可以测试看下区别哟。

祝学习愉快~

收起回答

提问者 qq_诶姆_0 #1

鼠标在滑动我的慕课，收藏夹时能够显示下拉菜单，是因为他们是兄弟元素，是这样吧？

2017-10-25 11:03:01
提问者 qq_诶姆_0 #2

好像也不太对啊，innerUL也不属于同一个父级元素，照理来说他们也不是兄弟元素，那为什么鼠标滑过，他们都会有下拉款显示呢？

2017-10-25 11:19:39