当我们将鼠标放在一个图片或者一个区域时，图片或区域会进行相关的变化，这个变化在css中很容易实现，那么在jquery中是怎么实现的呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
margin:10px 10px;
border: 1px solid grey;
}
.a{
border: 3px solid red;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//选择元素,添加事件
$('img').mouseover(function(){
// $(this).css('border','3px solid orange')
$(this).addClass('a')
}).mouseout(function () {
// $(this).css('border','1px solid grey')
$(this).removeClass('a')
})
})
</script>
</head>
<body>
<img class="a" src="img/1.jpg"/>
<img class="a" src="img/2.jpg"/>
<img class="a" src="img/3.jpg"/>
</body>
</html>显示结果如图所示：
当鼠标放在图片上时，会触发mousemove函数，边框会变成3px红色的实体框，
当鼠标离开是，会触发mouseout函数，边框会恢复到原来样子。
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
