通过将鼠标悬停在标签上来更改图像源

Question

我的网页上有多个标签，我希望当我将鼠标悬停在该标签上时，其他 div 中的图像应根据悬停的标签而变化。

任何帮助将不胜感激。

• 斯贾因

Answer 1

使用流行的 javascript 库 jQuery，您可以相当轻松地做到这一点：

-- 示例 HTML

<label class="target">Hover to Change</label> 
<img src="image001.gif" class="sourceImage" />

-- 对应的 jQuery

$("label.target").hover(
  function () {
    // mousing-over <label class="target"> changes img to 'image002.gif'
    $("img.sourceImage").attr("src", "image002.gif");
  },
  function () {
    // mousing-out <label class="target"> changes img to 'image001.gif'
    $("img.sourceImage").attr("src", "image001.gif");
  }
);