Question

基本上我要做的是让一个元素作为不同元素的悬停状态做出反应。

xt(#)

目前没有工作 - 这是件事吗？如果没有，我怎么能完成它。我知道选择器是正确的，它们是独立工作的。

Answer 1

我所指的你指的是你已经看过类似于

的东西

.selector-one{
  //style definitions
  .selector-two{
    //other style definitions
  }
}

这来自SCSS（Sass）或LESS之类的预处理器，我假设你可以快速谷歌那些。

对于问题的其他部分，是的，如果它的父容器甚至是兄弟徘徊，你可以对元素进行不同的样式设置。

实施例

＆＃13;

.container-hover:hover .red-on-hover{
 background-color:red;
}

.sibling-hover:hover + .sibling-hover{
  background-color:blue;
}

＆＃13;

<div class="container-hover">
  <h3>Other Text</h3>
  <div class="red-on-hover">Background will turn red on hover</div>
</div>

<p class="sibling-hover"> When I am hovered, my sibling will be blue</p>
<p class="sibling-hover"> Blue? Blue</p>

＆＃13;

对于兄弟悬停，请注意，如果您添加了更多.sibling-hover元素，除了第一个之外的其他元素如果您立即盘旋它将会变成蓝色先前的兄弟姐妹。

Answer 2

如果他们有父子关系，它可以工作。

.page-template-page-services-new {
  background: #ccc;
}
.page-template-page-services-new .imgBlock:hover .ButtonService {
  color: #6395ce;
  background-color: #fff;
}

选择器中的CSS选择器

2 个答案: