Question

当我将鼠标悬停在其上并点击其中时，我试图影响其他3个div，但它并不想工作。

#header2:hover {
background-color: rgba(10,50,10,0.9);
}
#header2:active {
    background-color: rgba(0,0,0,0);
}
#header2:active ~ #header1{
    background-color: rgba(0,0,0,0.8);
}
#header2:active ~ #header3{
    background-color: rgba(50,10,10,0.8);
}
#header2:active ~ #header4{
    background-color: rgba(10,10,50,0.8);
}

https://jsfiddle.net/ThinkingStiff/a3y52/ 在这个例子中，我发现whilist试图找出问题，它工作正常，我看不出任何差异。这些元素也不是彼此的孩子或父母。（如果可能的话，我想在没有Javascript / Jquery的情况下解决这个问题）

我的HTML：

<div id="header1"><a data-scroll id="link1" href="#header1content"></a></div>
<div id="header2"><a data-scroll id="link2" href="#header2content"></a></div>
<div id="header3"><a data-scroll id="link3" href="#header3content"></a></div>
<div id="header4"><a data-scroll id="link4" href="#header4content"></a></div>

Answer 1

为了完成这项工作，#header2应该是标记中的第一个元素。因为css中的~选择器可以选择特定元素之前（未跟随）的元素。

因此，如果您想在#header2的鼠标悬停时设置不同的元素，那么#header2应该首先出现在标记中。同样，如果您想在#header4悬停时设置不同元素的样式，那么#header4应该在标记中排在第一位。

使用css flex，您可以更改元素的顺序。它具有可以改变顺序的子元素的order属性。您可以按如下所示使其工作：

＆＃13;

.headers {
  flex-direction: column;
  display: flex;
}
.headers div {
  background: #ccc;
  margin: 0 0 10px;
  height: 50px;
}
#header2 {order: 2;}
#header1 {order: 1;}
#header3 {order: 3;}
#header4 {order: 4;}
#header2:hover {
background-color: rgba(10,50,10,0.9);
}
#header2:active {
    background-color: rgba(0,0,0,0);
}
#header2:active ~ #header1,
#header2:hover ~ #header1 {
    background-color: rgba(0,0,0,0.8);
}
#header2:active ~ #header3,
#header2:hover ~ #header3 {
    background-color: rgba(50,10,10,0.8);
}
#header2:active ~ #header4,
#header2:hover ~ #header4 {
    background-color: rgba(10,10,50,0.8);
}

＆＃13;

<div class="headers">
  <div id="header2"><a data-scroll id="link2" href="#header2content">Header 2</a></div>
  <div id="header1"><a data-scroll id="link1" href="#header1content">Header 1</a></div>
  <div id="header3"><a data-scroll id="link3" href="#header3content">Header 3</a></div>
  <div id="header4"><a data-scroll id="link4" href="#header4content">Header 4</a></div>
</div>

＆＃13;

将鼠标悬停在/点击以影响另一个div？

1 个答案: