用户在CSS中将对象悬停时如何设置另一个对象的样式

Question

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

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

我怎样才能做到这一点

Answer 1

只要html元素1和2满足某些条件，就可以用几种方法来做到这一点：

1. 对象1必须在标记中的对象2 之前 （因为在CSS选择器中不能“向上”或“向后”） 。
2. 从对象1的角度来看， css选择器必须可以访问对象2 （再次，在css选择器中不能“向上”或“向后”） ，这意味着对象2不能例如位于对象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 之后 .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 + NOT）：

 <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

 *{ 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; } 

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