Question

问题说明：

我希望通过使用.first css命令，在.third上:hover之后可以看到课程.second和课程display: unset。 Actuall问题是，我可以更改在（.third）类.second之后实现的元素的显示，而不是之前实现的元素的显示.first）。我尝试了每个我知道的选择器，这些选择器会影响到hover（+ 和 ~ 和 {{1} }）;

代码

＆＃13;
＆＃13;
space
＆＃13;
.container { display: flex; flex-direction: column; justify-content: center; } .first { background: red; display: none; } .second { background: blue; } .third { background: red; display: none; } .second:hover + .first { display: flex; } .second:hover + .third{ display: flex; }
＆＃13;
＆＃13;
＆＃13;

更多信息：我知道可以通过JavaScript获取值类并编辑样式属性来解决此问题。这不是我想要的。我想要一个纯CSS解决方案。

感谢您的帮助

Answer 1

目前无法通过CSS选择以前的兄弟元素，因此最简单的方法制作课程 .firstand 和课程 .third 可见之后：将鼠标悬停在类 .second上是为了利用：将鼠标悬停在父元素上（在本例中为.container）。

用户体验几乎相同，唯一区别在于：如果将光标移至.third或.first，则悬停保持为真。

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.first {
  background: red;
  display: none;
}
.second {  
  background: blue;
}
.third {
  background: red;
  display: none;
}

.container:hover .first,
.container:hover .third {
  display: flex;
}

＆＃13;

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

＆＃13;

Answer 2

您可以使用常规兄弟选择器~和order属性来实现您想要的效果。
请注意，我已将第二个元素放在HTML中。

但是，这会产生一种疯狂的行为，因为你的第一个元素出现在悬停的第二个元素的位置上......

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.first {
  background: red;
  order: 1; /* TAKIT: Added this */
  display: none;
}
.second {  
  background: blue;
  order: 2; /* TAKIT: Added this */
}
.third {
  background: red;
  order: 3; /* TAKIT: Added this */
  display: none;
}

/* TAKIT: Changed the below */

.second:hover ~ div{
  display: flex;
}

<div class="container">
  <div class="second">Second</div><!-- TAKIT: Changed order here -->
  <div class="first">First</div>
  <div class="third">Third</div>
</div>

⋅ ⋅ ⋅

也许你想做这样的事情：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.first {
  background: #f88;
  order: 1;
  display: none;
}
.second {  
  background: #88f;
  order: 2;
}
.third {
  background: #f88;
  order: 3;
  display: none;
}

.second:hover ~ div {
  display: flex;
}

/* TAKIT: Added the below */

body {
  font-family: Sans-serif;
}

.container div {
  padding: 10px;
  width: 100%;
  text-align: center;
}

.container .first:hover, .container .third:hover {
  display: flex;
  background: #8f8;
}

<p>(Try to hover from the center)</p>
<div class="container">
  <div class="second">Second</div>
  <div class="first">First</div>
  <div class="third">Third</div>
</div>

关于order的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

希望它有所帮助。

使用选择器无法将悬停效果应用于之前的效果

2 个答案: