javascript - 将鼠标悬停在网页顶部的图像上后，我想根据图像悬停特定的 div 并隐藏其他 div

Question

首先，所有三行文本都将可见。那些在不同的分区中。当我将鼠标悬停在图像 1 上时，只有第一个 div 应该可见，其他两个应该隐藏。

像这样，如果我将鼠标悬停在图像 3 上，则只有第三个 div 文本或第 3 行应该可见，其他行应该隐藏。

你能告诉我如何实现吗？或者你能给我一个工作示例或代码吗？我尝试使用不同的方式但失败了。

请检查 jsfiddle 中的 html 代码。 https://jsfiddle.net/mdykabir/ex67pfs1/2/

    <div class="images">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/1.png">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/2.png">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/3.png">
</div>

<div class="infoArea">
    <div id="infOne">
        Show this div if hover on image 1.
    </div>

    <div id="infTwo">
        Show this div if hover on image 2.
    </div>

    <div id="infThree">
        Show this div if hover on image 3.
    </div>
<div>

Answer 1

你为图像上的 mouseover/mouseout 添加一个事件处理程序，就像这样，然后切换一个隐藏/显示 div 的类

window.addEventListener('load', function() {
  var images = document.querySelectorAll('.images > img');
  var divs = document.querySelectorAll('.infoArea > div');
  for (i = 0; i < images.length; i++) {

    (function(i){
      images[i].addEventListener('mouseover', function(e) {
        document.querySelector('.infoArea').classList.toggle('hide');
        divs[i].classList.toggle('show');
        
      })
      images[i].addEventListener('mouseout', function(e) {
        document.querySelector('.infoArea').classList.toggle('hide');
        divs[i].classList.toggle('show');
      })
    })(i);

  }  
})

.infoArea.hide div {
  display: none;
}
.infoArea > div.show {
  display: block;
}

<div class="images">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/1.png">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/2.png">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/3.png">
</div>

<div class="infoArea">
    <div id="infOne">
        Show this div if hover on image 1.
    </div>

    <div id="infTwo">
        Show this div if hover on image 2.
    </div>

    <div id="infThree">
        Show this div if hover on image 3.
    </div>
<div>

---

通过一个小的标记更改，您甚至不需要脚本，只需要 CSS 悬停

.images {
  display: inline-block;
}
.images:hover ~ .infoArea > div {
  display: none;
}
.images.imgOne:hover ~ .infoArea #infOne,
.images.imgTwo:hover ~ .infoArea #infTwo,
.images.imgThree:hover ~ .infoArea #infThree {
  display: block;
}

<div class="images imgOne">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/1.png">
</div>
<div class="images imgTwo">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/2.png">
</div>
<div class="images imgThree">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/3.png">
</div>

<div class="infoArea">
    <div id="infOne">
        Show this div if hover on image 1.
    </div>

    <div id="infTwo">
        Show this div if hover on image 2.
    </div>

    <div id="infThree">
        Show this div if hover on image 3.
    </div>
<div>

---

根据评论，这里有一个示例如何在点击时切换，并保持结果

window.addEventListener('load', function() {
  var images = document.querySelectorAll('.images > img');
  var divs = document.querySelectorAll('.infoArea > div');
  for (i = 0; i < images.length; i++) {

    (function(i,old){
      images[i].addEventListener('click', function(e) {
        old = document.querySelector('.infoArea .show');
        if (old) {
          old.classList.toggle('show');
        }
        if (old != divs[i]) {
          divs[i].classList.toggle('show');
        }        
      })
    })(i);

  }  
})

.infoArea div {
  display: none;
}
.infoArea > div.show {
  display: block;
}

<div class="images">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/1.png">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/2.png">
    <img src="http://www.mykabir.info/wp-content/uploads/2017/01/3.png">
</div>

<div class="infoArea">
    <div id="infOne">
        Show this div if hover on image 1.
    </div>

    <div id="infTwo">
        Show this div if hover on image 2.
    </div>

    <div id="infThree">
        Show this div if hover on image 3.
    </div>
<div>