Question

下面的JSFiddle显示DIV B在我悬停在DIV A上时会改变颜色。但我需要完全相反：将鼠标悬停在DIV B上并使DIV A改变颜色。

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

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

我无法重新排列原始html元素，他们需要保持不变。

这可能是CSS，还是只有Javascript？

Answer 1

你需要一点点jQuery，因为你无法在CSS中悬停时改变以前的兄弟姐妹样式：

$('#b').hover(
  function(){
    $('#a').css({'background':'#ccc'});
  },
  function(){
    $('#a').css({'background':'initial'});
  }
);

//#a:hover + #b {
//    background: #ccc
//}

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

编辑：w / vanilla javascript：

var a = document.getElementById('a');
var b = document.getElementById('b');

b.onmouseover = function(e) {
	a.style.background = '#CCC';
}

b.onmouseout = function(e) {
	a.style.background = 'initial';
}

//#a:hover + #b {
//    background: #ccc
//}

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

Answer 2

也许你需要的是General Sibling Selector：它选择任何兄弟，而不仅仅是下一个兄弟。

#b:hover ~ #a { background: ...; }

Answer 3

用css有点难，但试试这个

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }

div#a{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 10px;
  position: absolute;
  top:110px;
}

div#b{
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 10px;
  position: absolute;
}

div#a:hover +div#b{
  background-color: black;
}


</style>

 <div id="a"></div>
 <div id="b"></div>

</body>
</html>

＆＃13;

或者，最简单的方法是使用jquery.this是完整的代码来执行它。这个会对你有帮助。

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }

div#a{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 10px;
  
}

div#b{
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 10px;
}




</style>

 <div id="a"></div>
 <div id="b"></div>

<script type="text/javascript">
  $("div#b").mouseenter(function(){
    $("div#a").css({"background-color":"black"});
  });

  $("div#b").mouseleave(function(){
    $("div#a").css({"background-color":"orange"});
  });



</script>
</body>
</html>

＆＃13;

Answer 4

这可以在javascript中完成

// mouse is over div b
document.getElementById("b").onmouseover = function(){
    document.getElementById("a").style.background = "#ccc"
}
// mouse leaves div b
document.getElementById("b").onmouseout = function(){
    document.getElementById("a").style.background = "intial"
}

Answer 5

您可以使用父元素来控制悬停样式，如下所示：

<div class="parent">
  <div id="a">Div A</div>
  <div id="b">Div B</div>
</div>

.parent:hover div {
  background: #ccc;
}
.parent div:hover,
.parent div:hover ~ div {
  background: none;
}

http://jsfiddle.net/qemmhpem/1/

在CSS悬停事件中，我可以更改上面的div样式吗？

5 个答案: