<div id="wrap" class="wrap">
1
<p class="play">MouseOver / MouseOut</p>
<p class="mo"><p>
</div>
<div id="wrap2" class="wrap">
2
<p class="play">MouseEnter / MouseLeave</p>
<p class="me"><p>
</div>
.wrap {
float: left;
height: 600px
width: 300px;
padding: 10px;
margin: 10px;
font-size: 30px;
text-align: center;
background: #ccc;
}$(document).ready(function () {
$("#wrap").mouseover(function () {
$("#wrap .play").css("background", "yellow");
$(".mo").text("mouseover 작동")
});
$("#wrap").mouseout(function () {
$("#wrap .play").css("border", "3px solid #fff");
$(".mo").text("mouseout 작동")
});
$("#wrap2").mouseenter(function () {
$("#wrap2 .play").css("background", "yellow");
$(".me").text("mouseenter 작동")
});
$("#wrap2").mouseleave(function () {
$("#wrap2 .play").css("border", "3px solid #fff");
$(".me").text("mouseleave 작동")
});
});
External CSS
This Pen doesn't use any external CSS resources.