• Life is short,You need Python
  • 加油吧!!!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

CSS3关于:hover 在前和在后的比较

hover是一个伪类选择器,最近发现一个问题,就是关于.con:hover li 和.con li:hover的比较,先来描述一下这两个的意思:
.con:hover li 表示的是当鼠标移动到.con中时的li样式变化
.con li:hover 表示的是当鼠标移动到.con中的li上面的时候li的样式变化

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .con{
            border:2px solid red;
        }
        ul{
            list-style:none;
        }
        li{

            width:50px;
            height:50px;
            margin:10px 0;
            line-height:50px;
            text-align:center;
            background-color:gold;
            transition:all 2s ease;

        }

        
         /*关于hover在前或者在后的比较*/
        /*.box .front:hover表示的是当鼠标移动到box中的front上时的front样式变化。
         .box:hover .front 表示的是当鼠标移动到box上面的时候front的样式变化*/
 
        /*鼠标停留在红色框内任何区域都hover,1-5全部同时hover*/
        .con:hover li{
            background-color:red;
            width:500px;

        }



         /*鼠标只有停留在黄色区域在进行hover,而且鼠标移动到哪个哪个进行hover*/
        .con li:hover{
          /*  background-color:red;
            width:500px;
        }*/
    </style>
</head>
<body>
    <ul class="con">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

效果图如下,解释:

.con li:hover 鼠标只有停留在黄色区域在进行hover,而且鼠标移动到哪个哪个进行hover
.con:hover li 鼠标停留在红色框内任何区域都hover,1-5全部同时hover
CSS3关于:hover 在前和在后的比较


Little Cat, 版权所有丨如未注明 , 均为原创丨转载请注明THEDARKEYESCSS3关于:hover 在前和在后的比较
喜欢 (0)or分享 (0)
Little Cat
关于作者:
就算你放荡不羁,说话又刻薄,可我喜欢你。
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址