|
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery3/jquery-3.2.1.js"></script>
<script type="text/javascript"></script>
<style type="text/css">
div{
width: 100px;
height:80px;
background-color: red;
margin: 5px;
border:#0E0707 1px solid;
}
#p2,#p4{display: none;
}
</style>
</head> <body>
<div id="p1">11111111</div>
<div id="p2">2222222</div>
<div id="p3">33333333</div>
<div id="p4">44444444</div>
<script type="text/javascript">
//方法一
// $(document).ready(function(){
// $("#p1,#p3").mousemove(function(){
// $(this).next().show()
// })
// $("#p1,#p3").mouseout(function(){
// $(this).next().hide()
// })
// })
//方法二
//方法二
//$(document).ready(function(){ //可同时追加多个元事件
// $("#p1,#p3")
// .on("mousemove",function(){
// $(this).next().show()
// })
// .on("mouseout",function(){
// $(this).next().hide()
// })
//})
//方法三
$(document).ready(function(){
$("#p1,#p3").hover(
function(){
$(this).next().show()
},
function(){
$(this).next().hide()
})
})
</script>
</body>
</html>
|
