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在悬停时隐藏/显示正确的图像，那么它会更好。这样它会立即显示出来。

如何使用Javascript在悬停时更改输入类型标记中的（图像源）？

1 个答案: