将鼠标悬停在div1下的div2上更改div1

Question

如果div1悬停在div2下，是否可以更改div1？

/* Works */
.div1:hover + .div2 {
  background-color: red;
}

/* Doesn't Work */
.div2:hover + .div1,
.div2:hover ~ .div1,
.div2:hover .div1 {
  background-color: red;
}

<div class="div1">hover</div>
<div class="div2">hover</div>

使用Javascript和/或JQuery的解决方案也很受欢迎

Answer 1

对两个div使用JQuery的{​​{3}} + .hover()

$( ".div1" ).hover(
  function() {
    $(".div2").css( "background-color", "red" );
  }, function() {
    $(".div2").css( "background-color", "initial" );
  }
);

$( ".div2" ).hover(
  function() {
    $(".div1").css( "background-color", "red" );
  }, function() {
    $(".div1").css( "background-color", "initial" );
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

Answer 2

不，CSS没有提供以前的兄弟选择器，唯一的解决方案是使用JS。您可以使用jquery的prev（）方法。

＆＃13;

＆＃13;

$(function() {
  $(".div2").hover(function() {
      $(this).prev().addClass("hoveredBg");
    },
    function() {
      $(this).prev().removeClass("hoveredBg");
    });
});

＆＃13;

.hoveredBg {
  background-color: red;
}

＆＃13;

<div class="div1">div 1 hover</div>
<div class="div2">div 2 hover</div>

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

＆＃13;

＆＃13;

＆＃13;

这只会帮助您将鼠标悬停在之前的兄弟div上，而不会让浏览器负担下一个兄弟悬停的负担，这可以仅使用CSS来实现。

Answer 3

如果您不想使用javascript，可以在容器上使用display: flex，然后更改渲染顺序（请注意，html顺序也必须更新）。然后，您可以将鼠标悬停在div2上并突出显示div1。

.container {
  display: flex;
  flex-wrap: wrap;
}

.div1, .div2 {
  flex: 0 0 100%;
}

.div1 { order: 1; }
.div2 { order: 2; }

.div2:hover ~ .div1 {
  background-color: red;
}

<div class="container">
  <div class="div2">hover 2</div>
  <div class="div1">hover 1</div>
</div>

Answer 4

请尝试以下代码。

$(document).ready(function() {
  $(".div2").mouseover(function() {
    $(".div1").css("background-color", "red");
  });
  $(".div2").mouseout(function() {
    $(".div1").css("background-color", "");
  });
});

/* Works */

.div1:hover+.div2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

希望这会对你有所帮助。

Answer 5

看看这个小提琴，

https://jsfiddle.net/rkqhvzyc/

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".div2").hover(function(){
      $('.div1').css("background-color", "red");
      }, function(){
      $('.div1').css("background-color", "white");
  });
});

＆＃13;

/* Works */
.div1:hover + .div2 {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

有趣的是，没有人在单个页面上指出类是多个，
 不，你不应该像许多人建议的那样定位.div1，并期望DOM中的所有其他.div1也不会被定位。

// NONSENSE
$( ".div2" ).hover(
  function() {
    $(".div1").css( "background-color", "red" );
  }, function() {
    $(".div1").css( "background-color", "initial" );
  }
);

<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>

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

反映上述问题 - 这里有几个解决方案：

// 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE)
$(".hoverTargetPrev").hover(function() {
  $(this).prev(".div1").toggleClass("red");
});

// 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find()
$(".div2").hover(function() {
  $(this).closest(".couple").find(".div1").toggleClass("red");
});

// 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...)
$(".hoverTargetNearestPrev").hover(function() {
  $(this).prevAll(".div1").eq(0).toggleClass("red");
});

.div2 {color:red;}
.red {background: red;}

<h3> 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetPrev">DIV2 hover me (will not work any more)</div>


<h3> 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find() </h3>
<div class="couple">
  <div class="div1">DIV1</div>
  <div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
  <div class="div1">DIV1</div>
  <div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
  <div class="div1">DIV1</div>
  <div>Future intruder...</div>
  <div class="div2">DIV2 hover me (will kork!)</div>
</div>

<h3> 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me (will work!!)</div>

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