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

Question

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <title>Portfolio V1</title>

        <link rel="stylesheet" type="text/css" href="main.css"/>
        <script type="text/javascript"></script>
    </head>
    <body>
        <img src="images/test1.png" onmouseover="this.src=images/test2.png" onmouseout="this.src='test1.png'" >
    </body>
</html>

Answer 1

您必须使用 JavaScript 才能完成这项工作。它不会像您尝试的那样就地工作。

编辑：它确实可以就地工作，但您漏掉了单引号。

在 onmouseover 属性中，您应该引用一个 JavaScript 函数。查看 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 2

我用background-color做了个例子，原理就到这里了。

您可以查看代码：

const div = document.querySelector('div');

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

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

<div></div>

Answer 3

您需要确保这两个图像都存在并且位于正确的文件夹中。
确保名称与您在代码中编写的名称完全相同。
您遇到的一个问题是您没有将图像名称括起来（在 onmouseover 中用引号引起来：'images/test2.png'）。
在 onmouseout 中，您将图像设置为 test1.png 而不是 images/test1.png。是故意的吗？

这是一个工作示例：

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

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

Rollover Effect: Change Picture with Mousehover

html

hover

transition

onmouseover

onmouseout