javascript - 如何使用Javascript在悬停时更改输入类型标签中的(图像源)？

Question

我想用 JavaScript 更改悬停时的图像 src，但这里有一个问题 这是我的 HTML

<div class="foo">
 <div class="foo-2">
   <form>
    <input type="image" src="I want to change this on hover">
   </form>
  </div>
 </div>

我查看了这个问题的答案CSS: Change image src on img:hover

这里引用一下答案: ” 如果您认为可以使用一些 javascript 代码，那么您应该能够更改 img 标签的 src，如下所示

function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

html 为

img id="my-img" src="http://dummyimage.com/100x100/000/fff"         onmouseover="hover(this);" onmouseout="unhover(this);" />   

这很有帮助，但我在定位代码中的类型图像时确实遇到了麻烦，因此我可以使用 javascrit 更改它。

Answer 1

我认为在悬停时更改源不是一个好主意。为什么？图像需要加载，并且可能需要相对较长的时间来加载，如果 1 秒内没有任何反应，则会让用户感到困惑。

如果您预先加载这两个图像，然后使用 css 在悬停时隐藏/显示正确的图像，那就更好了。这样它就会立即显示。