当我们将鼠标放在一个图片或者一个区域时,图片或区域会进行相关的变化,这个变化在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函数,边框会恢复到原来样子。