摘要：<!DOCTYPE html>
<html>
<head>
<title>鼠标滑过特效</title>
<meta charset="utf-8">
<script type="text/javascript" src="jq
<!DOCTYPE html>
<html>
<head>
<title>鼠标滑过特效</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
<div id="box">
<div id="div1">
<img id="img" src="images/1383541695.jpg">
<img id="imgh" src="images/1383536964.jpg">
</div>
<div id="div2">
<img id="img" src="images/1383536386.jpg">
<img id="imgh" src="images/1383534389.jpg">
</div>
<div id="div3">
<img id="img" src="images/1383540866.jpg">
<img id="imgh" src="images/1383532486.jpg">
</div>
<div id="div4">
<img id="img" src="images/1383541808.jpg">
<img id="imgh" src="images/1383539327.jpg">
</div>
</div>
<script type="text/javascript">
$(function () {
var $div1=$("#div1");//获取四个div
var $div2=$("#div2");
var $div3=$("#div3");
var $div4=$("#div4");
$div1.mouseover(function(){
$("#div1 #imgh").show();
})
$div1.mouseout(function(){
$("#div1 #imgh").hide();
})
$div2.mouseover(function(){
$("#div2 #imgh").css("display","inline-block");
})
$div2.mouseout(function(){
$("#div2 #imgh").css("display","none");
})
$div3.mouseover(function(){
$("#div3 #imgh").css("display","inline-block");
})
$div3.mouseout(function(){
$("#div3 #imgh").css("display","none");
})
$div4.mouseover(function(){
$("#div4 #imgh").css("display","inline-block");
})
$div4.mouseout(function(){
$("#div4 #imgh").css("display","none");
})
})
</script>
</body>
</html>
