jQuery鼠标悬停的时候图片替换
需求：当鼠标放在按钮上的时候，按钮图片会变成另外一张图片，但鼠标离开的时候，图片恢复原本状态。
大致实现demo是这样的：其实就是一个鼠标划过事件，来控制css的背景图片的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图折线图混合使用</title>
</head>
<style>
#remove {
width: 40px;
height: 20px;
border: none;
color: #FFFFFF;
background: url(?developer/article/1509771/images/delete.png);
background-size: 100% 100%;
}
</style>
<body>
<div id="remove"></div>
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$("#remove").hover(function() {
$(this).css("background-image", "url(images/delete1-1.png)");
}, function() {
$(this).css("background-image", "url(?developer/article/1509771/images/delete.png)");
});
</script>
</html>CSS鼠标悬停的时候图片替换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS代码鼠标经过图片变换图片</title>
</head>
<body>
<img src="?developer/article/1509771/images/delete.png" name="picture" width="330" height="210" border="0" align="middle"
onMouseOver="this.src='images/delete1-1.png'" onMouseOut="this.src='?developer/article/1509771/images/delete.png'">
</body>
</html>本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.09.18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读