伪类选择器hover的用法实例

hover   当鼠标悬浮在元素上方时,向元素添加样式。

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div01{
                width: 100px;
                height: 100px;
                background-color: #f00;
            }
            #div01{     /*100*/
                background-color: #000;
            }
            .div01:hover{    /*10+10*/
                background-color: #ff0;
            }
        </style>
    </head>
    <body>
        <!--:hover      叫伪类选择器
            当你的鼠标放上去的时候,会变化成的样子
            权值   10
        -->
        
        
        <div class="div01" id="div01">
            
        </div>
    </body>
</html>

 

posted @ 2019-05-28 17:42  zxy吖吖  阅读(913)  评论(0编辑  收藏  举报