CSS：悬停一个div，操作另一个div [重复]

Question

需要悬停一个 div 然后对另一个 div 执行操作，但操作 DIV 位于 Hover Div 之上，有什么想法可以实现吗？

谢谢

这是我的代码

a {
  display: block;
  padding: 8px 10px;
  border: 1px solid red;
  max-width: 20%;
}

.hover:hover ~ .action{
  background: yellow;
}


.hover1:hover ~ .action1{
  background: yellow;
}

<!--This one can -->
<a href="#" class="hover1">Hover</a>
<a href="#" class="action1">Action</a>

<br>
<br>

<!-- But this one cannot, i need this-->
<a href="#" class="action">Need This to be action</a>
<a href="#" class="hover">When Hover This</a>

<br><br>

Codepen 链接：https://codepen.io/YSLee/pen/OQNadN

Answer 1

只需将它们包装起来并使用 flexbox 的 order（你需要让它们按正常顺序排列 - CSS 不能倒退 - 但要从 CSS 中反转它们）：

a {
  display: block;
  padding: 8px 10px;
  border: 1px solid red;
  max-width: 20%;
}

.hover:hover~.action {
  background: yellow;
}

.hover1:hover~.action1 {
  background: yellow;
}
.inverter {
  display: flex;
  flex-direction: column;
}
.inverter>*:last-child {
  order: -1;
}

<!--This one can -->
<a href="#" class="hover1">Hover</a>
<a href="#" class="action1">Action</a>

<br>
<br>

<!-- But this one cannot, i need this-->
<div class="inverter">
  <a href="#" class="hover">When Hover This</a>
  <a href="#" class="action">Need This to be action</a>
</div>

Answer 2

如果您可以将包装器 div 添加到您的 HTML，您可以使用包装器上的悬停来定位 .action 元素，然后禁用包装器上的 pointer-events 并在 .hover 元素上重置它，所以它悬停另一部分时不起作用。

a {
  display: block;
  padding: 8px 10px;
  border: 1px solid red;
  max-width: 20%;
}

.wrapper:hover > .action{
    background: yellow;
}

.wrapper{pointer-events:none;}

.hover{pointer-events:auto;}

<div class="wrapper">
        <a href="#" class="action">Need This to be action</a>
        <a href="#" class="hover">When Hover This</a>
</div><br/><br/>

<div class="wrapper">
        <a href="#" class="hover">regular Hover</a>
        <a href="#" class="action">Action</a>
</div><br/><br/>

<div class="wrapper">
        <a href="#" class="hover">Hover sandwich</a>
        <a href="#" class="action">Action</a>
        <a href="#" class="hover">Hover sandwich</a>
</div><br/><br/>

<div class="wrapper">
        <a href="#" class="action">multiple Action!</a>
        <a href="#" class="hover">Hover</a>
        <a href="#" class="action">multiple Action!</a>

</div>

这种方法的最佳之处在于，您可以设置简单、可扩展的规则，无论.hover 和.action 元素的位置如何，即使使用多个元素，这些规则都将正确应用：)

但一个明显的限制是，您将在目标元素上松开pointer-events，因此如果您需要悬停/单击或其他任何东西，这可能不是最好的方法。

所以这一切都取决于您的用例。

另一种方法是在容器上设置 :hover，然后在目标的 :hover 上重置初始值。

a {
  display: block;
  padding: 8px 10px;
  border: 1px solid red;
}

.wrapper{
  display:inline-block;
  width: 20%;
}

.wrapper:hover > .action{
    background: yellow;
}

.action:hover{
  background:initial !important;
  }

<div class="wrapper">
        <a href="#" class="action">Need This to be action</a>
        <a href="#" class="hover">When Hover This</a>
</div><br/><br/>

<div class="wrapper">
        <a href="#" class="hover">regular Hover</a>
        <a href="#" class="action">Action</a>
</div><br/><br/>

<div class="wrapper">
        <a href="#" class="hover">Hover sandwich</a>
        <a href="#" class="action">Action</a>
        <a href="#" class="hover">Hover sandwich</a>
</div><br/><br/>

<div class="wrapper">
        <a href="#" class="action">multiple Action!</a>
        <a href="#" class="hover">Hover</a>
        <a href="#" class="action">multiple Action!</a>
</div>

注意，使用这种替代方法，您不会在 .action 上丢失 pointer-events，但您不能像第一种方法那样拥有 1 个 .hover，多个 .action

Answer 3

也不知道原因，但这里有一个解决方法：)

    <!--This one can -->
    <a href="#" class="hover1">Hover</a>
    <a href="#" class="action1">Action</a>

    <br>
    <br>

    <!-- But this one cannot, i need this-->
    <div>
    <a href="#" class="hover2" style="position: relative; 
            bottom:0; width:100%">When Hover This</a>
    <a href="#" class="action2" style="position: relative;bottom:72px;width:100%"> Need This to be action</a>
    </div>

Answer 4

另一个使用flex-direction: column-reverse;的弹性选项

.flex-wrapper {
  display: flex;
  flex-direction: column-reverse;
}
a {
  display: block;
  padding: 8px 10px;
  border: 1px solid red;
  max-width: 20%;
}
.hover:hover ~ .action{
  background: yellow;
}

<div class="flex-wrapper">
  <a href="#" class="hover">When Hover This</a>
  <a href="#" class="action">Need This to be action</a>
</div>

Answer 5

这在纯css中是不可能的，因为css不能后退，所以你必须更改html代码或者你必须得到jquery的帮助强>，像这样：

$(document).ready(function(){

    $('.hover').hover(function(){

        $('.action').css('background','yellow');

    },function(){$('.action').css('background','none');})

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<a href="#" class="action">Need This to be action</a>

<a href="#" class="hover">When Hover This</a>