如何使用hover点击一个元素使另一个颜色变色

标签：改变   color   效果   lock   ott   记录   技术   方式   页面   

1.点击后改变子元素

.myclass:active span{`
`color:#00f;`
`}`

此方式ios下不生效，chrome下正常

2.改变下一个兄弟元素

.myclass:active +span{
color:#00f;
} 

**3.改变下一个兄弟元素的相邻元素 **

.myclass:active +span p{
color:#00f;
} 

今天装一天软件，很心累，想下班结果临下班之际用：hover和dispalay作出一个自己很开心得东西，主要是自己之前以为自己做不出来，拿到ui图得第一反应就是这怎么做，写页面的时候就怕他跳过去了，现在趁着有时间就又重新琢磨了下，结果写出来了，哈哈，赶紧记录下来，就我这记性肯定转眼就忘了。

效果如图所示

html：

?<img?src="./img/houshichang-dianji@2x.png"?alt=""?class="tupain?center-block?d1">

?<img?src="./img/houshichang@2x.png"?alt=""?class="tupain?center-block?d2"

css

    .d1{

        display: none;

    }

    .d2{

        display: block;

    }

hover和display

        .kk{

            width:260px;

            height:325px;

            background:rgba(255,255,255,1);

            border:1px solid rgba(230,230,230,1);

            margin-right: 21px;

            margin-top: 61px;

            margin-bottom: 100px;

        }

        .kk:hover{

            background-color: #3880EC;

            color: white;

        }

        .kk:hover .d1{

            display: block;

        }

        .kk:hover  .d1+.d2{

            display: none;

        }

这个图也可做，嘻嘻，以上图来自我做下面得灵感纯css，

都是点击一个元素隐藏另一个元素，再显示其他元素

如何使用hover点击一个元素使另一个颜色变色

标签：改变   color   效果   lock   ott   记录   技术   方式   页面   

原文地址：https://www.cnblogs.com/wszzj/p/12960288.html