4-5练习中的hover问题

请问一下啊

用.div1:hover ul{display:block;}可以达到题目中的显示效果为什么用ul:hover li{display:block}不行呢？

谢谢！

hpbrave 2017-06-26

源自：盒子模型 4-8 课程总结

收起

4回答

卡布琦诺回答被采纳获得+3积分 2017-06-26 13:39:20

 <div class="div1">
            <h3>家电</h3>
            <ul class="elec">
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul>
        </div>

观察代码，我们要实现的是鼠标经过家电，显示ul的元素，而不是鼠标经过ul显示li的内容，又因为“家电”是div的子元素，因此需要设置div1:hover ul{}这么设置是因为继承原因，希望可以帮到你！

收起回答

hpbrave 提问者 #1

再对照着4-3的编程练习一起看可以说是非常明白了！非常感谢！

2017-06-26 19:50:30

提问者 hpbrave 2017-06-26 12:07:12

下面是body部分

<body>

</ul>

</div>

</ul>

</div>

</ul>

</div>

</body>

</html>

收起回答

提问者 hpbrave 2017-06-26 12:06:33

<!DOCTYPE html>

<html>

<head>

<title>display属性</title>

/*样式补充*/

margin:0;

padding:0;

}

.big{

width:150px;

margin:0 auto;

}

h3{

background-color:#ececec;

border:1px solid #DEDEDE;

width:100px;

height:30px;

text-align:center;

line-height:30px;}

li{

list-style-type:none;

font-size:13px;

width:100px;

height:17px;

text-align:center;

margin:2px;

padding-top:3px;}

ul{

display:none;

}

.div1:hover ul{

display:block;

}

.div2:hover ul{

display:block;

}

.div3:hover ul{

display:block;

}

</style>

</head>

收起回答

卡布琦诺 2017-06-26 11:58:18

建议亲将代码贴全，以便于大家更好的发现问题并帮助解答！

收起回答

提问者 hpbrave #1

说回复内容不能多于1500个字符。。。那我把head和body分别发吧下面是head部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>display属性</title> <style type="text/css"> /*样式补充*/ *{ margin:0; padding:0; } .big{ width:150px; margin:0 auto; } h3{ background-color:#ececec; border:1px solid #DEDEDE; width:100px; height:30px; text-align:center; line-height:30px;} li{ list-style-type:none; font-size:13px; width:100px; height:17px; text-align:center; margin:2px; padding-top:3px;} ul{ display:none; } .div1:hover ul{ display:block; } .div2:hover ul{ display:block; } .div3:hover ul{ display:block; } </style> </head>

2017-06-26 12:04:17
提问者 hpbrave #2

崩溃啊怎么代码是不分行的。。。我试试另一种回复方法

2017-06-26 12:05:49