4-3编程练习
来源：4-6 案例应用
慕斯9076004
2017-07-20 23:49:55
为什么鼠标悬浮在家电字上面时代码是ul:hover而不是h2:hover?
4回答
-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
ul {width:200px;}
/*补充样式*/
div{display:inline;}
li{
display:none;
}
h2{
cursor:pointer;
}
/*下一个兄弟元素用“+”*/
h2:hover+ul li{
display:inline;
}</style>
</head>
<body>
<div><h2>家电</h2>
<ul>
<li>冰箱</li>
<li>空调</li>
<li>洗衣机</li>
</ul>
</body>
</html>这是第一种方式；
下面是第二种方式：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
ul {width:200px;}
/*补充样式*/
div{display:inline;}
li{
display:none;
}
h2{
cursor:pointer;
}
a{
text-decoration:none;
color:#000;
}
a:hover li{display:inline;}
</style>
</head>
<body>
<ul>
<a href="#">
<h2>家电</h2>
<li>冰箱</li>
<li>空调</li>
<li>洗衣机</li>
</a></ul>
</body>
</html>0 -
好帮手慕糖
2017-07-25
两种方法都实现了效果哟。继续加油！祝学习愉快！
0 -
慕无忌9800862
2017-07-24
寻找下一个兄弟元素用“+”链接
0 -
好帮手慕糖
2017-07-21
你好，这个是要看你的html结构是怎么设置的，来判断的哟。祝学习愉快！
0
相似问题