jquery鼠标移入移出事件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
}

p {
height: 50px;
border:1px solid red;
margin: 30px;
text-align:center;
font-size:30px;
font-style:italic;
font-weight:bold;
}
.p2{display:none}
.left div {
background: #bbffaa;
}

</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>.hover()方法</h2>
<div class="left">
<div class="aaron1">
<p class="p1">hello</p>
<p class="p2">2</p>
</div>
</div>
<script type="text/javascript">
$(".p1").hover(
function() {
$(this).css("background", 'red');
$(this).animate({opacity:0},3000)

},
function() {
$(this).css("background", 'yellow');
$(this).animate({opacity:1},3000)
}
);
$(".aaron1").hover(
function() {
$(this).css("background", '#00ffff');
},
function() {
$(this).css("background", '#ccffcc');
}
);
$("p").mouseout(function(){$(".aaron1").css("background","#ffccff")})
$("p").mouseover(function(){$(".aaron1").css("background","#33ccff")})