翻转效果：用鼠标悬停改变图片
Posted
技术标签:
【中文标题】翻转效果：用鼠标悬停改变图片【英文标题】：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>
【问题讨论】：
【参考方案1】：-
您需要确保两个图像都存在并且位于正确的文件夹中。
确保名称与您在代码中编写的名称完全相同。
您遇到的问题之一是您没有包装图像的名称（在
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'" >【讨论】：
哇！你是个天才。我会试试这个并告诉你它是否有效。 非常感谢！非常感谢您的建议！您是否还知道是否可以在此悬停中添加淡入淡出的过渡？因为看起来有点刺眼……？ 要进行渐变过渡，您必须使用两个不同的图像 :) 但这是针对不同的问题。 我的意思是你必须使用两个不同的<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;
<div></div>【讨论】：
【参考方案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 非常了解，所以我不知道如何运行它。我可以将您的代码复制到脚本标签中，它应该可以工作吗？以上是关于翻转效果：用鼠标悬停改变图片的主要内容，如果未能解决你的问题，请参考以下文章