4-3 编程练习

来源:4-1 display属性

WCHENG

2017-06-11 22:02:23

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

            ul {width:200px;}

            /*补充样式*/

            li{display:none;}

            h2:hover li{display: inline;}

            

        </style>

    </head>

    <body>

        <ul>

            <h2>家电</h2>

            <li>冰箱</li>

            <li>空调</li>

            <li>洗衣机</li>

        </ul>

    </body>

</html>

这段代码为什么不能实现编程练习里面的效果,问题出现在哪里?

写回答

1回答

鲨鼻叔叔

2017-06-11

你的代码是h2:hover li{display: inline;} 本意是后代选择器,父元素h2下的后代元素li,但是li不是h2的子元素,你可以写成ul:hover li{display: inline;} ,这样就对了。

3
hCHENG
h 感谢您的解答
h017-06-11
共1条回复

0 学习 · 36712 问题

查看课程