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

我的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函数？

传递元素：

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

就这么做吧

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

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

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

传递元素：

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

就这么做吧

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

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

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

---

就停在那里

你这样做的方式不太理想

onmouseover

作为内联属性添加事件监听器是一种糟糕的方法（看看所有这些重复）

按照您编写代码的方式，实际上无法分辨（除非在每个参数中添加

this

）

您甚至不需要JavaScript（假设您希望在指针离开图像时恢复图像） 相反，让

a

元素使用带有CSS的图像作为背景（

background image

属性）

然后，在

：将其悬停

，将其更改，或者更好地使用精灵工作表，只需修改

背景位置

它看起来像这样（将

id

属性移动到

a

元素）

---

就停在那里

你这样做的方式不太理想

onmouseover

作为内联属性添加事件监听器是一种糟糕的方法（看看所有这些重复）

按照您编写代码的方式，实际上无法分辨（除非在每个参数中添加

this

）

您甚至不需要JavaScript（假设您希望在指针离开图像时恢复图像） 相反，让

a

元素使用带有CSS的图像作为背景（

background image

属性）

然后，在

：将其悬停

，将其更改，或者更好地使用精灵工作表，只需修改

背景位置

它看起来像这样（将

id

属性移动到

a

元素）

---

这里有一个jQuery方法，因为您将问题标记为这样

请看一看活动活页夹，它是链式和链式的缩写

您可以像这样定义图像链接，使用

data alternative src

作为

mouseover

图像路径

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

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

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

---

这里有一个jQuery方法，因为您将问题标记为这样

请看一看活动活页夹，它是链式和链式的缩写

您可以像这样定义图像链接，使用

data alternative src

作为

mouseover

图像路径

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

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

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

样品加工 在悬停状态下更改图像的操作 如果您正在寻找纯javascript，请尝试以下方法

代码 html

样品加工 在悬停状态下更改图像的操作 如果您正在寻找纯javascript，请尝试以下方法

代码 html

---

我建议您删除内联脚本调用并使用以下命令：

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

---

编码demo以获取您悬停的图像。

我建议您删除内联脚本调用并使用以下命令：

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

<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>

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

<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>

您尝试了什么？向我们展示您的代码。您可以使用

onHover.call（this）

和

this

在它里面就是那个图像element@Karl-安德烈·加农——我还没怎么试过。我不知道如何继续。不管怎样，两个发布的答案都是好的，PSL说了我要做的事情。你可以通过将这个作为参数传递给onHover（）函数并在jsp中使用var id=this.id来获得每个img标记的id。你尝试了什么？向我们展示您的代码。您可以使用

onHover.call（this）

和

this

在它里面就是那个图像element@Karl-安德烈·加农——我还没怎么试过。我不知道如何继续。不管怎样，两个发布的答案都很好，PSL说了我要做的事情。您可以通过将此作为参数传递给onHover（）函数来获取每个img标记的id，而jsIt中的var id=this.id没有太大帮助。顺便问一下，当每个a都有不同的背景图像时，为什么我们要使用a.lb？@user657592这与使用精灵表的建议有关。它没有太大帮助。顺便问一下，当每个a都有不同的背景图像时，为什么我们要使用a.lb？@user657592，这与使用精灵表的建议有关。