Javascript：显示一个元素，隐藏另一个元素

参加网页设计课程，并且需要在这个项目上严格使用Javascript

基本上，我希望在屏幕左侧有一系列缩略图，当一个缩略图悬停在屏幕上方时，它会在屏幕右侧显示有关图像的信息。它保持这种方式，直到另一个缩略图悬停在上方，然后信息被替换

我想到了在每个div上面都有一系列包含信息的div，悬停时目标div出现，最后一个div消失

---

有什么建议吗？

jQuery最适合这样做，或者您可以使用onMouseOver函数，并将您的信息设置为visibility:hidden。可能会发布一些代码，以便提供更多帮助

---

也检查一下这个

给图像一个mouseover属性，并在hover上运行一个函数

<img onmouseover="changeInfo(0)">
<img onmouseover="changeInfo(1)">
<img onmouseover="changeInfo(2)">
<div id="showInfo"></div>

---

我不知道这是否是你想要的结果。首先，我使用div声明所有图像。信息一开始就被隐藏了

<div id="posts">
  <div id="post1">
    <img src="[Insert an image]" width="100" height="100"/>
    <p class="hide"> information about picture one </p>
  </div>
  <div id="post2">
    <img src="[Insert an image]" width="100" height="100"/>
    <p class="hide"> information about picture one </p>
  </div>
  <div id="post3">
    <img src="[Insert an image]" width="100" height="100"/>
    <p class="hide"> information about picture one </p>
  </div>
</div>

和javascript：

var posts = document.getElementById("posts").children;

function forEach(el, callback) {
  for(var i = 0; i <= el.length; i++) {
    callback(posts[i]);
  }
}

forEach(posts, function(child) {
  child.addEventListener("mouseover", function(){
    forEach(posts, function(el) {
      if(child.id === el.id)
        el.className = "label";
      else 
        el.className = "nolabel";
    });
  });
});

var posts=document.getElementById（“posts”）.children；
函数forEach（el，回调）{
对于（var i=0；我请尝试一下，当您有实际代码并且在使其工作时遇到问题时，请提出问题。根据帮助中心中解释的指南，这个问题太广泛了
.nolabel p {display: none;}

.label p { display: block; }

.hide { display: none; }

var posts = document.getElementById("posts").children;

function forEach(el, callback) {
  for(var i = 0; i <= el.length; i++) {
    callback(posts[i]);
  }
}

forEach(posts, function(child) {
  child.addEventListener("mouseover", function(){
    forEach(posts, function(el) {
      if(child.id === el.id)
        el.className = "label";
      else 
        el.className = "nolabel";
    });
  });
});