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

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

我怎样才能做到这一点

===============>>#1 票数: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>

===============>>#2 票数:0

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

  ask by translate from so

未解决问题?本站智能推荐: