CSS hover更改其他元素属性
:hover 选择器用于选择鼠标指针浮动在上面的元素。

除自身属性外,hover还能更改其他元素的属性。下面就结合例子谈一下我的看法:

先附上div结构,方便理解:
    <div class="item-1">
        item-1
        <div class="item-1-child">item-1-child</div>
    </div>
    
    <div class="item-2">
        item-2
        <div class="item-2-child">item-2-child</div>
    </div>
    
    <div class="item-3">
        item-3
        <div class="item-3-child">item-3-child</div>
    </div>


hover改变子元素属性
更改子元素属性很简单,只需在父元素hover后跟上子元素即可,css示例代码如下:
.item-1:hover .item-1-child{
    background-color:#50ff00;
}

效果如下:
文章正文图片


hover更改同级(兄弟)元素属性:
更改兄弟元素又分两种情况
      (1)需要更改的兄弟元素是当前元素的相邻元素,也就是说紧接着当前元素。那么写法如下:
.item-1:hover +.item-2{
    background-color:#50ff00;
}

效果如下:
文章正文图片

     (2)需要改变的兄弟元素不是当前元素的邻接元素(如上面演示图中的 item-1 和 item-3)。
这种情况就需要改一下写法,用上面的 “+” 就行不通了,得用 “~”。写法如下:
.item-1:hover ~.item-3{
    background-color:#50ff00;
}

效果如下:

文章正文图片

所以可以这么认为,情况一只是情况二的一个特例,对于情况一,用情况二的 “~” 替换 “+” 也是完全可行的。所以情况一所示写法使用条件很严格,必须是紧跟的元素才行。而情况二 “~” 写法只需是当前元素之后的元素即可。


更改其他元素的子元素属性
理解了上面写的几种,这个自然就出来了,无非就是更改一下选择器即可示例如下:
.item-1:hover ~.item-3>.item-3-child{
    background-color:#50ff00;
}

效果如下:
文章正文图片


注意说了那么几种情况都是前面的元素控制位于其后的元素及子元素,那如果后面的元素想通过hover改变位于其前面的元素属性该如何操作呢?如 item-3 想改变 item-1 的属性,这里就行不通了。上面几种都只能控制位于其后面的元素,想要控制当前元素之前的元素,用上面的写法不能实现,目前我不知道如何通过 CSS 实现控制之前元素的需求,查了一些资料也没找到。如果您知道如何实现或者有好的建议,非常欢迎留言。

总结
以上只是展出了比较基础的控制,至于各种组合,完全看需求

【原创文章,转载请注明出处】
It's
欢迎访问本站,欢迎留言、分享、点赞。愿您阅读愉快!
*转载请注明出处,严禁非法转载。
https://www.devsong.org
QQ留言 邮箱留言
头像
引用:
取消回复
提交
涂鸦
涂鸦
热门