Question

我试图得到它，以便当你悬停div B时，div A的背景会发生变化。

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

CSS

#b:hover ~ #a {
background: #ccc
}

Answer 1

编辑：

仅限Css方法使用flexbox按照您想要的顺序重新排序#a和#b，而它们在html中实际上是相反的。

http://jsfiddle.net/15j14Ljb/

您只能使用css：/

影响hovered元素之后的子元素或元素

你可以用jQuery（js）来做到这一点：

var originalBackground;
$("#b").hover(function() {
    originalBackground = $("#a").css("background");
    $("#a").css("background", "#ccc");
}), function () {
    $("#a").css("background", originalBackground);
});

或纯粹的js：

var originalColor = document.getElementById("a").style.backgroundColor;
document.getElementById("b").onmouseover = function() {
        document.getElementById("a").style.backgroundColor = "blue";
    }
    document.getElementById("b").onmouseleave = function() {
        document.getElementById("a").style.backgroundColor = originalColor;
    }

Answer 2

只有#b出现在#a之前，才能执行此操作，因为

element1~element2 选择每个 element2 > 元素1

JS Fiddle 1

#b:hover ~ #a { background-color: #ccc; }

<div id="b">Div B</div> <div>random other elements</div> <div>random other elements</div> <div>random other elements</div> <div id="a">Div A</div>

或使其像#a:hover ~ #b

JS Fiddle 2

#a:hover ~ #b { background-color: #ccc; }

<div id="a">Div A</div> <div>random other elements</div> <div>random other elements</div> <div>random other elements</div> <div id="b">Div B</div>

使用javascript实现它可以通过多种方式完成，这里由.hover() ^（*）函数完成：

JS Fiddle 3

$('#a').hover(function(){ $('#b').css({'background-color':'#CCC'}); }, function(){ $('#b').css({'background-color':'transparent'}); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="a">Div A</div> <div>random other elements</div> <div>random other elements</div> <div>random other elements</div> <div id="b">Div B</div>

^（*） https://api.jquery.com/hover/

Answer 3

这是一个简单的JavaScript解决方案。

＆＃13;

window.addEventListener("load", function() {
  var HEADER1 = document.getElementById("header");
  HEADER1.addEventListener("mouseover", display, false);
  HEADER1.addEventListener("mouseout", back1, false);
}, false);

function display() {
  var mainObject = document.getElementById("object");

  mainObject.style.display = "block";
}

function back1() {
  var mainObject = document.getElementById("object");
  mainObject.style.display = "none";
}

＆＃13;

在div的悬停时，改变div b的颜色

3 个答案: