当用户在css中悬停对象时，如何设置另一个对象的样式

Question

我想在用户在css中悬停对象1时设置对象2的样式。例如：

<style>
.object1:Hover then style object2{
Styling of object2 Goes Here
}
</style>

我该怎么做

Answer 1

只要html元素1和2满足某些条件，您就可以通过多种方式执行此操作：

1. 对象1必须在 对象2之前来标记（就像你一样） 不能在css选择器中“向上”或“向后”）。
2. 对象2必须可以通过css选择器从对象1的角度到达（再次，你不能在css中“向上”或“向后” 选择器），这意味着对象2不能例如在a中 对象1的父上下文（也会违反1。）。

此类选择器的示例：

1。子选择器

.object1:hover .object2 { your css rules here }

适用于html结构，其中.object2是.object1的子元素：

<div class="object1">
  <div class="object2">Some content</div>
</div>

2。相邻的兄弟选择器

.object1:hover + .object2 { your css rules here }

适用于（一个！）立即跟随兄弟 .object2：

 <div class="object1"></div
 <div class="object2">This will be affected.</div>
 <div class="object2">This will NOT be affected.</div>

3。所有兄弟姐妹选择器

.object1:hover ~ .object2 { your css rules here }

将适用于所有（可能是许多！）同级.object2的风格（但+不适用于儿童.object2 }）：

 <div class="object1">
     <div class="object2">This will NOT be affected.</div>
 </div>

 <div class="object2">This will be affected.</div>

 <someElementWhichisNotAffected></someElementWhichisNotAffected>

 <p class="object2">This will be affected.</p>

Answer 2

＆＃13;

＆＃13;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


div{
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
    margin: 10px auto;
}
.div1:hover{
  border: 2px solid #000;
}
.div1:hover ~ .div2{
    background: #f00;
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

＆＃13;

＆＃13;