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

如果可以在HTML中添加包装器div，则可以使用包装器上的悬停来定位.action元素，然后在包装器上禁用pointer-events并在{{1}上重置它元素，因此当悬停其他部分时它不起作用。

.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

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>上遗忘pointer-events，但您实际上不能拥有1 .action，多个.hover第一种方法

Answer 3

  

这在纯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>

Answer 4

不知道原因，但这是一个解决方法：）

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

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