Question

我有两个div A和B. div A是一个图像。 Div B是div A下面的一段。

我正在努力使它如果我将鼠标放在div A上，div B的背景和字体颜色转换为不同的颜色而不影响div A. 我目前有：悬停选择器，所以如果有人在它上面悬停，则div B会改变。但是我不知道如何在div A上方影响div B.

有关如何实现这一目标的任何线索？

编辑：请参阅下面的代码结构。我试图让它成为如此，如果我将鼠标悬停在＃image1上，＃info1的背景和其段落的字体颜色将会改变，依此类推其他两个图像。

<div class="row">
    <div class="col-md-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6">
          <img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
        </div>
        <div id="info1" class="col-md-12 col-sm-6">
          <p class="washed-out"> 1 </p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6">
          <img id="image2" src="res/images/aimage2.png" class="img-responsive center-block">
        </div>
        <div id="info2" class="col-md-12 col-sm-6">
          <p class="washed-out"> 2 </p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6">
          <img id="image3" src="res/images/animage3.png" class="img-responsive center-block">
        </div>
        <div id="info3" class="col-md-12 col-sm-6">
          <p class="washed-out"> 3 </p>
        </div>
      </div>
    </div>
</div>

的CSS：

.washed-out{
  background: white;
  color: black;
  transition: background-color 300ms linear, color 1s linear;
}

.washed-out:hover{
  background: black;
  color: white;
}

Answer 1

您使用兄弟选择器~或直接兄弟选择器+

＆＃13;

img:hover + div {
  color: red;
}

＆＃13;

<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>

＆＃13;

根据评论更新，可能的CSS版本

＆＃13;

.hoverme:hover + div .washed-out {
  color: red;
  background: black;
}

＆＃13;

<div class="col-md-12 col-sm-6 hoverme">
  <img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
  <p class="washed-out">1</p>
</div>

＆＃13;

根据评论更新，可能的JS版本

＆＃13;

window.addEventListener('load', function() {
  var imglist = document.querySelectorAll('img.img-responsive');
  for (var i = 0; i < imglist.length; i++) {
    imglist[i].addEventListener('mouseover', function(e) { e.target.parentElement.nextElementSibling.classList.add('infos');   
    })
    imglist[i].addEventListener('mouseout', function(e) { e.target.parentElement.nextElementSibling.classList.remove('infos');   
    })
  }
})

＆＃13;

div.infos .washed-out {
  color: red;
  background: black;
}

＆＃13;

<div class="col-md-12 col-sm-6">
  <img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
  <p class="washed-out">1</p>
</div>

＆＃13;

Answer 2

您正在寻找adjacent sibling selector - element:hover + element：

.container {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 0.5s;
}

.container:first-child {
  margin-bottom: 10px;
}

/** if the 1st element is hovered, changed the 2nd **/
.container:hover + .container {
  background: blue;
  color: white;
}

<div class="container">Div 1</div>

<div class="container">Div 2</div>

Answer 3

使用继承兄弟~或直接继承兄弟+对hover

进行任何更改

＆＃13;

img:hover ~ div {
  color: red;
}

＆＃13;

<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>
<div>Hey there...I also get red when you hover the image</div>

＆＃13;

Answer 4

你想要的是javascript事件处理程序。

这样的事情：

var d1 = document.getElementById("div1");  // on hover on this div
var d2 = document.getElementById("div2");  // bring changes to this

d1.addEventListener("hover", callfun, false);

function callfun(){
    d2.style.backgroundColor = 'blue';
}

祝你好运

Answer 5

基本上你需要注册一个悬停进出处理程序，如下面的答案所示： Event listener hover changing other element 这是一个略微修改的版本，以更贴合您的需要。

document.getElementById("Div-A").addEventListener("mouseenter",function (){
   document.getElementById("Div-B").style.backgroundColor = "red";
   document.getElementById("Div-B").style.backgroundColor = "Yellow"; 
});

document.getElementById("Div-A").addEventListener("mouseout",function (){
   document.getElementById("Div-B").style.backgroundColor = "";
   document.getElementById("Div-B").style.text = ""; 
});

Answer 6

<script>
  function Myfunc1(){
     document.getElementById("div1").style.backgroundColor = "green"
     document.getElementById("div2").style.backgroundColor = "white"}
  function Myfunc2(){
     document.getElementById("div2").style.backgroundColor = "red"
     document.getElementById("div1").style.backgroundColor = "white"}
</script>
     <pre><div id="div1" onmouseover="Myfunc1()"><img src=""><p> look</p></div>
     <div id="div2" onmouseover="Myfunc2()"><p>here</p></div></pre>

将鼠标悬停在一个元素上，转换另一个元素

6 个答案: