时间戳

首页 > 解决方案 > Javascript：在多个图像上使用 onmouseover 和 onmouseout 函数

javascript - Javascript：在多个图像上使用 onmouseover 和 onmouseout 函数

问题描述

编辑：很抱歉，如果我对任何解决方案的回复晚了，因为我需要时间来弄清楚它们是如何工作的哈哈

我是 Javascript 的初学者，我目前正在尝试使用这段代码来更改鼠标悬停时的图像

// Mouseover change (Ciel):
function rollover(my_image){
    my_image.src = "images/ci2_a.png";
    }

function mouseaway(my_image){
    my_image.src = "images/ci_a.png";
    }

这是相应的 HTML

<img src="images/ci_a.png" onmouseover="rollover(this)" onmouseout="mouseaway(this)" alt="xxx" style="float:left; width:38%">

这很好用，但我想对同一页面上的多个图像执行此操作（每张图片不同的图像翻转）。即使更改了函数和东西的名称，它也不起作用。当我尝试为下一张图片添加类似功能时，第一张图片立即停止更改 onmouseover。有人能告诉我如何在不止一张图像上（不是同时）执行类似的事件吗？谢谢！

标签： javascript

解决方案

您可以将事件侦听器添加到您想要的所有图像元素。

<img class="my-image" src="images/ci_a.png" onmouseover="rollover(this)" onmouseout="mouseaway(this)" alt="xxx" style="float:left; width:38%"/>

function rollover(){
  this.src = "images/ci2_a.png";
}

function mouseaway(){
  this.src = "images/ci_a.png";
}

const myImages = document.querySelectorAll('.my-image')
myImages.forEach(img => {
  img.addEventListener('mouseenter', rollover)
  img.addEventListener('mouseleave', mouseaway)
})

推荐阅读