我有一个包含许多图像的网页，每个图像都有一个 title属性。当我将鼠标悬停在图像上时，我想要 title要在单独的 legend 中显示的文本我创建的元素(不是一个微小的悬停工具提示)。我有一个mouseover工作正常的函数 - 即当我将鼠标悬停在图像上时，图例会更改值。但我希望该值为 title单个图像的文本 - 我不知道如何访问。我已经尝试过…innerHTML = this.title这显然是不正确的。
[图像数量很大且不断变化(就像相册一样)，因此我无法为每个 <img> 添加单独的代码标签。我可以使用alt或任何其他 <img>属性来完成这项工作。我没有嫁给innerHTML方法，或者，但我希望一些简单的代码可以做到这一点!]
请帮忙？谢谢! (仅供引用，我是一名新手编码员。)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
最佳答案
您似乎正在尝试使用 this.title来表示不同的图像？如果您希望他们的标题出现在<h1>中标签，您需要将信息传递给下面所示的函数。
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>关于javascript - 使用innerHTML 在悬停时显示图像图例(不是作为工具提示)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48528449/