javascript - 如何识别哪个图像标签正在调用 mouseHover 函数？

Question

我的 HTML 页面上有四个链接。代码如下:

<a class="lb" href="home.php"><img id="imgH" src="Bhome.png" onmouseover="onHover();"/></a>
<a class="lb" href="AboutUs.php"><img id ="imgA" src="Babout.png" onmouseover="onHover();" /></a>
<a class="lb" href="code.php"><img id ="imgC" src="Bcode.png" onmouseover="onHover();" /></a>
<a class="lb" href="login.php"><img id="imgL" src="Blogin.png" onmouseover="onHover();" /></a>

悬停时，我想将相应的图像更改为不同的图像。我不想为每个图像标签编写不同的函数。在Javascript函数中，如何找出哪个img标签调用了onHover函数？

Answer 1

传递元素:

..... onmouseover="onHover(this)";

就这样吧

function onHover(elem) {
    elem.src = 'someother_image.png';
}

或者使用 jQuery 事件处理程序:

$('#imgH, #imgA, #imgC, #imgL').on('mouseover', function() {
    this.src = 'someother_image.png';
});