用CSS解决hover一个div，改变另外2个div的样式

最新推荐文章于 2023-11-23 20:47:07 发布

原创最新推荐文章于 2023-11-23 20:47:07 发布 · 1.4w 阅读

13 ·

CC 4.0 BY-SA版权

大web前端专栏收录该内容

41 篇文章

订阅专栏

项目中需实现div鼠标悬浮背景色切换，div1和div3默认绿色，div2默认红色，悬浮时当前div变红，其余变绿。先让悬浮时都变红，用hover加相邻兄弟选择器+解决div1悬浮时div2变色问题，最后用~选择器解决div3悬浮时div2样式问题，使用时要保证元素同父元素。

在项目中遇到这样一个问题：
div1和div3有默认的css样式背景颜色是绿色
div2有一个默认的css样式背景颜色是红色
需求：当鼠标悬浮在div1，div2，div3上时让当前div的背景颜色变为红色，其余背景颜色变为绿色，无鼠标悬浮时让其展示默认效果

<style>
        .div1 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: green;
        }
        .div2 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: red;
        }
        .div3 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: green;
        }
      
    </style>

	<div class="div1">内容一</div>
    <div class="div2">内容二</div>
    <div class="div3">内容三</div>

首先让悬浮时背景颜色都改变为红色

 		 .div1:hover{
            background-color: red;
        }
        .div2:hover{
            background-color: red;
        }
        .div3:hover{
            background-color: red;
        }

其次需要解决的问题就是 : 当鼠标悬浮在div1和div3时需要将div2的背景颜色变为绿色

        .div1:hover+.div2{
            background-color: green;
        }

通过查资料可以用hover加上相邻兄弟选择器 + 来实现，解决了鼠标悬浮在div1上时div2背景颜色改变，但依然无法解决鼠标悬浮在div3时改变div2的样式

最后通过 ~ 选择器来解决，但需要将div3的位置放在div1前保证不影响div1的兄弟选择器起作用，给样式加上绝对定位即可原有的效果

	 <div class="div3">内容三</div>
	 <div class="div1">内容一</div>
     <div class="div2">内容二</div>

		.div3:hover~.div2{
            background-color: green;
        }

注意： ~ 的用法
1.需要保证元素具有相同的父元素，
2. div~p 表示div后所有的p都会被选择

	<div></div>
    <p></p>
    <p></p>