4-5编程问题
来源：4-7 编程练习
snowman022
2017-07-28 13:35:57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
*{margin:0px; padding:0px; font-family:"宋体";}
.big{width:100px;margin:auto;}
.div1,.div2,.div3{border:1px solid #ececec;}
h3{background-color: #f2f4f6; text-align:center;}
.div1:hover li,.div2:hover li,.div3:hover li{display:block;}
li{list-style-type:none; display:none;}
ul li{padding:5px 0px 5px 35px; font-size:14px;}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3>洗护</h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3>衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
1 | <br> |
请帮忙看下我写的代码是否符合要求，还存在什么问题。
list-style-type:none;写在li{}中和写在*{}中效果一样，请问写在哪里比较好呢？
我没有用到class="elec"，class="wash"，class="clothes"这三个class，请问是不是我哪里写错了？谢谢！
如果 将.div1:hover li,.div2:hover li,.div3:hover li{display:block;} 改为ul:hover li{display:block;}就不能实现效果了，我理解是因为对li做了隐藏，但实际鼠标悬停是在h3标签上，但h3标签又不在ul标签中，相当于悬停在h3标签上无法触发到ul及其子元素li，所以hover必须设置在上一层父元素div上，鼠标悬停在h3标签（也就是div标签内）才会触发效果。我这样理解对吗？
1回答
-
1、list-style-type:none;写在li{}中更准确与规范，因为这是要面向的li标签。
2、class="elec"，class="wash"，class="clothes"这三个class是你写的，你没用到肯定是没用的呀，看你的需求了。
3、.div1:hover li,.div2:hover li,.div3:hover li{display:block;} 和ul:hover li{display:block;}选中的是不同的元素，当然效果不一样了，第一个是选中的div，第二个是选中的ul。一定要灵活。你是要放到这里个标题的时候才显示的，不是放到下面的内容才显示，首先要明白自己要做什么，你那么理解也可以。
编码不要太死了，灵活一点，自己写的是什么意思都不知道就不好了，一定要多练习一下，祝学习愉快！
0h017-08-30
