我有一些疑惑,我希望能在不使用"background-image"的情况下,在图像<img>
标签上设置悬停效果,这样当用户尝试将鼠标悬停在图像上时,图像将改变。
我应该怎么做?
谢谢。
我有一些疑惑,我希望能在不使用"background-image"的情况下,在图像<img>
标签上设置悬停效果,这样当用户尝试将鼠标悬停在图像上时,图像将改变。
我应该怎么做?
谢谢。
<img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'" />
this
指当前的 img
标签。
a.logo {
display:block;
width: 100px;
height: 100px;
background: url(/path/to/logo.png) no-repeat center center;
background-size: contain;
}
a.logo:hover {
background-image: url(/path/to/logo-hover.png);
}
<a href="#" class="logo"></a>
通过使用CSS,您可以获得更高的灵活性,并且即使在禁用JavaScript的环境中也可以工作。
在高级情况下非常有用。
var img = document.getElementById('myImg');
img.onmouseout = function () {
this.src = 'b.jpg';
};
img.onmouseover = function () {
this.src = 'a.jpg';
};
内联版本:<img src="original.jpg" onmouseover="this.src='hover.jpg';" onmouseout="this.src='original.jpg';" />
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", src);
});
});
设置on ready事件:
img:hover {
background: url("https://istack.dev59.com/7KXRp.webp");
/* padding: [image-height] [image-width] 0 0 */
padding: 200px 200px 0 0;
width: 0;
height: 0;
}
<img src="https://istack.dev59.com/9OcHP.webp" />