老师，为什么这样没有效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
            ul {width:200px;}
            /*补充样式*/
            ul li{display:none;}
            h2:hover li{
                display:inline;
             
            }
            
        </style>
    </head>
    <body>
        <ul>
            <h2><a href="#">家电</a></h2>
            <li>冰箱</li>
            <li>空调</li>
            <li>洗衣机</li>
        </ul>
    </body>
</html>

SiuNam 2017-11-09

源自：盒子模型 4-2 编程练习

收起

1回答

小于飞飞 2017-11-09 22:03:28

h2:hover li 意思是经过h2，它下面的(即h2标签里)li显示出来，可以h2标签里没有li，所以不显示，可以改成ul:hover li，在试一试。

收起回答

提问者 SiuNam #1

所以说:hover属性是显示他所对应的标签的子级别项目吗？

2017-11-10 13:22:49
小于飞飞回复提问者 SiuNam #2

注意与写的css代码 h2:hover li ，这是一个后代选择器，h2 下的 li。

2017-11-10 14:06:05