jQuery鼠标悬停的时候图片替换
2019-09-18 本文已影响0人
祈澈菇凉
需求：当鼠标放在按钮上的时候，按钮图片会变成另外一张图片，但鼠标离开的时候，图片恢复原本状态。
大致实现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(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(images/delete.png)");
});
</script>
</html>
CSS鼠标悬停的时候图片替换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS代码鼠标经过图片变换图片</title>
</head>
<body>
<img src="images/delete.png" name="picture" width="330" height="210" border="0" align="middle"
onMouseOver="this.src='images/delete1-1.png'" onMouseOut="this.src='images/delete.png'">
</body>
</html>
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
