jquery 实现鼠标经过 切换图片效果
知识点：1 hover事件的两个方法，一个是进入发生的事件，一个是离开触发的事件。只写一个默认为两个事件相同
2 jquery css attr 的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#pic-show{
background:url(images/1.jpg) no-repeat;
width:400px;
height:320px;
cursor:pointer;}
img{
width:400px;
height:320px;
margin-top:20px;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="pic-show"></div>
<img src="images/1.jpg"/>
<script>
$(document).ready(function(e) {
//div css 修改css background-image
$("#pic-show").hover(function(){
$(this).css("background-image","url(images/3.jpg)");
},function(){
$(this).css("background-image","url(images/1.jpg)");
});
//image attr 修改属性
$("img").hover(function(){
$(this).attr("src","images/3.jpg");
},function(){
$(this).attr("src","images/1.jpg");
});
});
</script>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_15288038/3029050
页:
[1]