Question

我正在尝试创建一个可以改变图片的悬停。很多教程告诉我尝试onmouseover和onmouseout。但Brackets（我用来编码的程序）无法找到第二张名为“test2.png”的图片。有没有人知道如何处理这个问题，最好只使用HTML。

以下是我看过的教程，展示了我想要实现的目标：

https://www.youtube.com/watch?v=qtpa_r1ILjo

https://www.youtube.com/watch?v=y4RJDUI7M8Y

UIModalPresentationStyle.None

Answer 1

您需要确保两个图像都存在且位于正确的文件夹中。
确保名称与您在代码中的名称完全相同。
您遇到的一个问题是您没有包装图片的名称（在onmouseover中加上引号：'images/test2.png'）。
在onmouseout中，您将图片设置为test1.png而不是images/test1.png。这是打算吗？

这是一个有效的例子：

＆＃13;

<img src="https://dummyimage.com/600x400/000/fff" onmouseover="this.src='https://dummyimage.com/600x400/f00/fff'" onmouseout="this.src='https://dummyimage.com/600x400/000/fff'" >

＆＃13;

Answer 2

您必须使用JavaScript才能完成这项工作。它不会像你试过的那样在现场工作。

编辑：它确实在原地工作，但你错过了单引号。

在onmouseover属性中，您应该引用JavaScript函数。有关更多信息，请查看有关onmouseover的this question。

例如，您可以使用以下内容：

<img src="images/test1.png" onmouseover="MouseOver(this)" onmouseout="="MouseOut(this)" >

现在，您将引用onmouseover和onmouseout事件的事件处理程序。但是，这些事件处理程序仍然需要在javascript代码段中定义。这可以嵌入到元素中：

function MouseOver(myimg) {
  myimg.src="images/test2.png";
}

function MouseOut(myimg) {
  myimg.src="images/test1.png";
}

Answer 3

我用背景色做了一个例子，但原理就在这里。

您可以查看代码：

＆＃13;

const div = document.querySelector('div');

window.addEventListener('mouseover', () => {
	div.style.background = 'red'
})

＆＃13;

div {
  width: 100px;
  height: 100px;
  opacity: 1;
  background-color: green;
  transition: 3s;
}

＆＃13;

<div></div>

＆＃13;

翻转效果：使用鼠标悬停更改图片

3 个答案: