选择器中的 CSS 选择器

Question

本质上，我想做的是让一个元素作为另一个元素的悬停状态使用react。

.page-template-page-services-new .imgBlock:hover { .page-template-page-services-new .ButtonService {颜色:#6395ce;背景色:#fff； } }


目前不工作 - 这是一回事吗？如果没有，我将如何完成它。我知道选择器是正确的，它们独立工作。

Answer 1

我认为你指的是你看到了类似的东西

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

这来自 SCSS (Sass) 或 LESS 等预处理器，我假设您可以快速搜索一下这些。

对于您问题的另一部分，是的，您可以为元素设置不同的样式，如果它是父容器或什至 sibling 悬停。

例子

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

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

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

对于同级悬停，请注意，如果您添加了更多 .sibling-hover 元素，那么当您将鼠标悬停在上方时，除了第一个之外的所有元素都可以变成蓝色它紧接在 sibling 之前。