这是我的代码 但onmouseout（）没有被正确调用，因为在div中我有2个元素，一个是div，另一个是span，其显示属性是none 我必须使用它因为我必须从身体调用函数 所以请帮助我
<html>
<head>
<title>example</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="../jsfile/jquery-1.7.2.js"></script>
<script>
var g_id;
function show_slide(temp){
var sub_str=temp.id.substring(11);
sub_str++;
$('#'+temp.id).animate({
'width':360},
function(){
$('#div-slide-image'+sub_str).hide();//hide preious div
$('#div-'+temp.id).animate({'width':'50%'});//increase width
$('#s_'+temp.id).show(); //show span tag
}
);
}
function hide_slide(temp){
var sub_str=temp.id.substring(11);
sub_str++;
$('#'+temp.id).animate({
'width':360},
function(){
$('#div-slide-image'+sub_str).show();//show next div which is hide previous
$('#div-'+temp.id).width('25%');//set width to original
$('#s_'+temp.id).hide(); //hide span again
}
);
}
function show_right_slide(temp){
var sub_str=temp.id.substring(15);
$('#s_slide-image'+sub_str).show(); //show span tag
sub_str--;
$("#"+temp.id).animate({
'width':'50%'},
function(){
$("#div-slide-image"+sub_str).remove();
});
}
function get_id(temp){
var sub_str=temp.id.substring(15);
sub_str--;
$('#'+temp.id).width('25%');
$('#div-slide-image'+sub_str).show();
//alert("abc");
}
</script>
</head>
<body>
<div class="container clearfix">
<div class="header">
<h1>Slide Image</h1>
</div>
<!--left Block 1-->
<div id="div-slide-image0" style="background-color: green;">
<img src="images/india.jpg" alt="indian flag" id="slide-image0" onmouseover="show_slide(this)" onmouseout="hide_slide(this)" />
<span id="s_slide-image0">India</span>
</div>
<!--left Block 2-->
<div id="div-slide-image1" style="background-color: brown;" >
<img src="images/america.jpg" alt="indian flag" id="slide-image1" onmouseover="show_slide(this)" onmouseout="hide_slide(this)"/>
<span id="s_slide-image1">America</span>
</div>
<!--right Block 1-->
<div id="div-slide-image2" style="background-color: yellow;" onmouseover="show_right_slide(this)" onmouseout="get_id(this)">
<img src="images/england.jpg" alt="indian flag" id="slide-image2"/>
<span id="s_slide-image2">England</span>
</div>
<!--right Block 2-->
<div id="div-slide-image3" style="background-color: orange;">
<img src="images/Europe.jpg" alt="indian flag" id="slide-image3"/>
<span id="s_slide-image3">Europe</span>
</div>
<!--left Block 3-->
<div id="div-slide-image4" style="background-color: aquamarine;" >
<img src="images/pakistan.png" alt="indian flag" id="slide-image4" onmouseover="show_slide(this)" onmouseout="hide_slide(this)"/>
<span id="s_slide-image4">Pakistan</span>
</div>
<!--left Block 4-->
<div id="div-slide-image5" style="background-color: blueviolet" >
<img src="images/japan.jpg" alt="indian flag" id="slide-image5" onmouseover="show_slide(this)" onmouseout="hide_slide(this)"/>
<span id="s_slide-image5">Japan</span>
</div>
<!--right Block 3-->
<div id="div-slide-image6" style="background-color: gold;">
<img src="images/australia.jpg" alt="indian flag" id="slide-image6"/>
<span id="s_slide-image6">Australia</span>
</div>
<!--right Block 4-->
<div id="div-slide-image7" style="background-color: windowframe;">
<img src="images/china.jpg" alt="indian flag" id="slide-image7"/>
<span id="s_slide-image7">China</span>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
<强> CSS
span.none{display:none;position: absolute;top: 34%;left: 60%;}
div.parent{width:25%;position:relative;}
img.animate{position:relative;}
<强> HTML
<div class="container clearfix">
<div class="header">
<h1>Slide Image</h1>
</div>
<!--left Block 1-->
<div class="parent" style="background-color: green;">
<img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="indian flag" />
<span class="none">India</span>
</div>
<div class="parent" style="background-color: brown;">
<img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="America flag" />
<span class="none">America</span>
</div>
<div class="parent" style="background-color: yellow;">
<img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="England flag" />
<span class="none">England</span>
</div>
<div class="parent" style="background-color: orange;">
<img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="England flag" />
<span class="none">Europe</span>
</div>
<div class="parent" style="background-color: aquamarine;">
<img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="Pakistan flag" />
<span class="none">Pakistan</span>
</div>
<div class="parent" style="background-color: gold;">
<img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="Japan flag" />
<span class="none">Japan</span>
</div>
<div class="parent" style="background-color: red;">
<img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="Australia flag" />
<span class="none">Australia</span>
</div>
<div class="parent" style="background-color: grey;">
<img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="China flag" />
<span class="none">China</span>
</div>
</div>
<强> JQUERY
$('.animate').mouseover(function() {
$(this).animate({ left: "100px" }); //sliding the flag image to 100px from left
$(this).parent().filter(':not(:animated)').animate({ width: "50%" }); // $(this).parent() finds the parent i.e div
$(this).next().show(); // $(this).next() finds the next subling i.e span
})
.mouseout(function() {
$(this).animate({ left: "0px" }); //sliding back the flag image to 0px to left
$(this).parent().animate({ 'width':'25%' });// $(this).parent() finds the parent i.e div
$(this).next().hide(); // $(this).next() finds the next subling i.e span
});