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

贵哥的编程之路

发布于 2020-10-28 12:21:44

2590

发布于 2020-10-28 12:21:44

核心是：触碰到哪里，记住是触碰哈，因为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>

触碰的不透明，不触碰的都透明.

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/04/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

alpha