Question

我有一系列图像，并且在悬停时，我希望他们更改<span>元素的文本。我之前用一些非常冗余的javascript完成了这个，在每个onMouseIn和onMouseOut上为每个图像更改<span>的文本，每个图像都有一个唯一的ID。我使用了这段代码，重复了几次：

window.onload = function () {
document.getElementById("foo").onmouseover = function () {
    document.getElementById("element").innerHTML = "bar";
};

document.getElementById("foo").onmouseout = function () {
    document.getElementById("element").innerHTML = "bar";
};

但我想知道是否有一种更简单的方法可以使用图像的alt标签。在图像悬停时，我希望<span>标记显示悬停图像的alt文本，而onMouseOut则恢复正常。怎么做？感谢。

Answer 1

您可以使用以下标记名称获取页面中的所有元素，并添加事件处理程序

＆＃13;

window.onload = function() {
  var imgs = document.getElementsByTagName('img'),
    span = document.getElementById("element");
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('mouseenter', function() {
      span.innerHTML = this.alt || '';
    });
    imgs[i].addEventListener('mouseleave', function() {
      span.innerHTML = '';
    });
  }
}

＆＃13;

<span id="element"></span>
<br />
<img src="//placehold.it/64X64&text=1" alt="img 1" />
<img src="//placehold.it/64X64&text=2" alt="img 2" />
<img src="//placehold.it/64X64&text=3" alt="img 3" />
<img src="//placehold.it/64X64&text=4" alt="img 4" />

＆＃13;

如果您不想定位所有img元素，那么您可以为需要触发它的所有图片添加一个类，然后使用document.getElementsByClassName('classname')代替document.getElementsByTagName('img')

javascript在悬停

1 个答案: