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

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

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

.object1:悬停然后设置样式object2{
object2的样式设置在这里
}

我怎样才能做到这一点

*{
填充：0；
保证金：0；
框大小：边框框；
}
div{
宽度：200px；
高度：200px；
边框：2个实心#ccc；
利润率：10px自动；
}
.div1:悬停{
边框：2倍实心#000；
}
.div1:悬停~.div2{
背景：#f00；
}

---

只要html元素1和2满足某些条件，就可以通过几种方式实现：

对象1必须在标记中位于对象2之前 无法在css选择器中“向上”或“返回”）

对象2必须可以通过css选择器从对象1的角度访问（同样，您不能在css中“向上”或“返回”） 选择器），这意味着对象2不能处于 对象1的父上下文（也将违反1.）

---

此类选择器的示例：

1.子选择器 适用于html结构，其中

.object2

是

.object1

的子元素：

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

---

3.所有同级选择器

.object1:hover~.object2{此处的css规则}

将您的样式应用于所有（可能很多！）兄弟

.object2

（但正如

+

不适用于子

.object2

）：

这不会受到影响。
这将受到影响。
这将受到影响

除非这两个项是相关的（父项/子项）或兄弟项，否则通常无法使用CSS实现这一点。如果你解释得更多，告诉我们你在做什么，我们可以进一步帮助你。目前还不清楚，我已经添加了一个全面的答案，详细解释了可能的变化。

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

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

 <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>