javascript - 将鼠标悬停在一个元素上，过渡到另一个元素

Question

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

我试图做到这一点，如果我将鼠标放在 div A 上，div B 的背景和字体颜色会转换为不同的颜色，而不会影响 div A。我目前有 :hover 选择器，所以如果有人将鼠标悬停在它上面，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

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

img:hover + div {
  color: red;
}

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

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

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

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

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

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');   
    })
  }
})

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

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