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函数中，如何找出名为onHover函数的img标签？

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';
});

Answer 2

停在那儿。

你会以一种不太理想的方式解决这个问题。

onmouseover作为内联属性是一种添加事件侦听器的糟糕方式（查看所有重复内容）
你编码它的方式，实际上不可能分辨（不是没有添加this作为每个参数）
你甚至不需要JavaScript（假设你希望图像在指针离开时恢复）！

相反，让a元素使用CSS（background-image属性）将背景图像作为背景。

然后，在:hover上更改它，或者更好的是，使用精灵表并只修改background-position。

它看起来像这样（将id属性移动到a元素）...

a.lb {
    background-image: url(/images/menu.png);
}

#imgH {
    background-position: 0 0;
}

#imgH:hover {
    background-position: 0 -200px;
}

Answer 3

我建议你删除内联脚本调用并使用它：

$('a.lb img').on('mouseover', function() {
    this.src = new_image_you _want; //this is the var with the image you want
});

代码演示 here 以获取您正在悬停的图像。

Answer 4

这是一个jQuery方法，因为你标记了你的问题。

请查看事件活页夹.hover()，它是已链接.mouseenter()和.mouseleave()的简写。

您可以定义类似的图片链接，data-alternative-src作为mouseover图片路径。

<a class="lb" href="#">
  <img src="original.png" data-alternative-src="alternative.png" />
</a>

然后，我们可以将原始图片路径缓存到另一个属性data-original-src，而不会使您的HTML代码（以及禁用Javascript的Web客户端）膨胀：

$(document).ready(function() {
  $('a.lb img').each(function() {
    $(this).attr('data-original-src', $(this).attr('src'));
  });
});

在鼠标输入和鼠标输出时，我们切换到正确的图像：

$('a.lb').hover(function() {
  var image = $(this).find('img');
  img.attr('src', img.attr('data-alternative-src'));
}, function() {
  var image = $(this).find('img');
  img.attr('src', img.attr('data-original-src'));
});

Answer 5

样本工作DEMO

在悬停

上更改图像的工作DEMO2

如果您正在寻找纯JavaScript，请尝试使用

码

function onHover(img)
{
alert(img.id); //image id 

   // do your code
}

HTML

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

Answer 6

<a class="lb" href="home.php"><img id="imgH" src="Bhome.png" onmouseover="onHover(this.id);"/></a>

<a class="lb" href="AboutUs.php"><img id ="imgA" src="Babout.png" onmouseover="onHover(this.id);" /></a>

<a class="lb" href="code.php"><img id ="imgC" src="Bcode.png" onmouseover="onHover(this.id);" /></a>

<a class="lb" href="login.php"><img id="imgL" src="Blogin.png" onmouseover="onHover(this.id);" /></a>

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

6 个答案:

样本工作DEMO

在悬停

码

HTML