Question

参加网页设计课程，并且需要在此项目中使用严格的Javascript。

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

我想到在彼此的顶部有一系列div包含信息，并且onhover出现目标div并且最后一个div消失。

有什么建议吗？

Answer 1

为图像指定鼠标悬停属性，并在悬停时运行一个函数。

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

然后将每个图像的信息放在一个数组中，并根据正在悬停的图像更改div中的内部html。

function changeInfo(index){
    var texts = ['Info on img0','Info on img1','Info on img2'];
    var info = document.getElementById('showInfo');
    info.innerHTML = texts[index];
}

Answer 2

我不知道这是否是您想要获得的结果。首先，我使用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>

这些是css类

.nolabel p {display: none;}

.label p { display: block; }

.hide { display: none; }

和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";
    });
  });
});

forEach 帮助我们简化此代码。

由于我们可以拥有任意数量的图像，我认为这不是一件好事想通过它的id来引用它们。

当光标悬停在其中一个图像上时，我们会触发一个鼠标悬停事件，该事件将比较ID。 if语句确保我们只修改我们单击的元素，其他元素保留在nolabel类中（或者如果它们有标签则替换它）。我希望有所帮助。

Answer 3

jQuery最适合这种情况，或者您可以使用onMouseOver函数，并使用visibility：hidden设置您的信息样式。也许发布一些代码可以提供更多的帮助。

也请查看Display text on MouseOver for image in html

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

3 个答案: