翻转效果：用鼠标悬停改变图片答案

【问题标题】：Rollover Effect: Change Picture with Mousehover翻转效果：用鼠标悬停改变图片
【发布时间】：2018-02-18 11:17:48
【问题描述】：

我正在尝试创建一个可以改变图片的悬停。很多教程告诉我尝试 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>

【问题讨论】：

标签： html hover transition onmouseover onmouseout

【解决方案1】：

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

这是一个工作示例：

&lt;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'" &gt;

【讨论】：

哇！你是个天才。我会试试这个并告诉你它是否有效。
非常感谢！非常感谢您的建议！您是否还知道是否可以在此悬停中添加淡入淡出的过渡？因为看起来有点刺眼……？
要进行渐变过渡，您必须使用两个不同的图像 :) 但这是针对不同的问题。
我的意思是你必须使用两个不同的<img标签
好的，我会设置另一个问题:)

【解决方案2】：

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

您可以查看代码：

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

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

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

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

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

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

例如，你可以使用这样的东西：

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

现在您指的是 onmouseover 和 onmouseout 事件的事件处理程序。但是，这些事件处理程序仍然需要在 javascript sn-p 中定义。这可以像这样嵌入到元素中：

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

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

【讨论】：

确实如此。在那种情况下，所缺少的只是我猜的报价......
不确定这一切都很重要，其他问题也可能存在（检查我的答案...）
因为我对 JavaScript 非常了解，所以我不知道如何运行它。我可以将您的代码复制到脚本标签中，它应该可以工作吗？