Javascript 在使用纯 JavaScript 悬停时显示图像 alt

Question

我的页面上有很多图像，我想使用 javascript 而不是 jquery 在鼠标悬停时显示我的图像 alt

我的图像代码是

<a href="<?php echo $displayData['href']; ?>" class="group">
<div class="relative">
<div class="absolute pin bg-black-50 group-hover:bg-black-10 transition"></div>
<div class="absolute pin-b pin-l h4 pb-2 lg:pb-4 border-b-8 border-primary mb-10 mx-6 text-white z-10 leading-tight">
<?php echo $displayData['name']; ?>
</div>
<img src="<?php echo $displayData['thumb']; ?>" title="<?=$displayData['name']?> alt="<?=$displayData['txt']?>">
</div>
</a>

我使用了标题和alt，但鼠标悬停时都没有显示

Answer 1

如果您有更多图像

<script>
function set_alt_attribute(image) {
image.setAttribute("alt", image.src); 
}
</script>
<img src="my_image.jpg" onload="set_alt_attribute(this);">
</img>

或单个图像

document.getElementById("ImageID").title="Dynamic title";

Answer 2

查看 onmouseover 和 onmouseout 事件

let img=document.querySelector("#imgid");
img.addEventlistener("mouseover",function(e)
{
e.target.setAttribute('alt','blabla');
});