JQuery mouserover事件 mouserout事件 jquery链式写法 addClass方法
当鼠标悬停在某个div上的时候,改变div的大小,同时,在移出该div的时候添加边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* .dd{
border: 2px solid black;
} */
#box{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
$(function(){
$('#box').mouseover(function(){
$('#box').css({
'width':'200px',"height":"200px","backgorund-color":"red"
})
.mouseout(function(){
$(this).addClass('dd');
$('.dd').css('border','2px solid black');
})
})
})
</script>
</body>
</html>