详解： :hover 12 三种方式唉，累死我了看评论啊啊啊

最新推荐文章于 2024-04-21 14:07:40 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-04-21 14:07:40 发布

阅读量552

点赞数 3

分类专栏： CSS3最详解

本文链接：https://blog.csdn.net/qq_37805832/article/details/105758722

版权

CSS3最详解专栏收录该内容

54 篇文章 1 订阅

订阅专栏

核心是：触碰到哪里，记住是触碰哈，因为not所以触碰的没有效果，其他的都有效果，问题什么效果？
opacity: .2;
filter: alpha(opacity=20);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .box1
        {
            width: 400px;
            margin: 20px auto;
        }
        .box1 li
        {
            float: left;
            margin: 5px;
        }
        img
        {
            width: 100px;
            height: 100px;
        }
        .box1:hover li:not(:hover)/*核心是碰到任何的li，除了这个都有效果*/
        /*问题，什么效果， opacity: .2;
            filter: alpha(opacity=20);？浏览器兼容问题第一个是0~1哈,第二个是0~100*/
        {/*filter与opacity一样都是设置透明度的，但是opacity 在IE8及以下是不兼容的；所以要设置filter属性；懂了把，啊哈哈哈*/
            opacity: .2;
            filter: alpha(opacity=20);
        }
          		
    </style>
</head>
<body>
    <ul class="box1">
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .box1
        {
            width: 400px;
            margin: 20px auto;
        }
        .box1 li
        {
            float: left;
            margin: 5px;
        }
        img
        {
            width: 100px;
            height: 100px;
        }
        
        
            li:hover/*点某一个li哪一个就透明*/
            {
                opacity: .2;
                filter: alpha(opacity=20);
            }
            
    </style>
</head>
<body>
    <ul class="box1">
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .box1
        {
            width: 400px;
            margin: 20px auto;
        }
        .box1 li
        {
            float: left;
            margin: 5px;
        }
        img
        {
            width: 100px;
            height: 100px;
        }
        
        
           
            .box1:hover li:not(:hover)/*不触碰的都透明，触碰的不透明（清晰）最核心的忘记了哈哈哈，是 .box1:hover
            意思我触碰的是class为box1的，li:not(:hover)然后是li的哪一个透明或者不透明呢是不触碰的都透明，触碰的不透明（清晰）*/
            {
                 opacity: .2;
                filter: alpha(opacity=20);
            }
    </style>
</head>
<body>
    <ul class="box1">
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
        <li><img src="./1.jpg"></li>
    </ul>
</body>
</html>