0
Это мой код Но onmouseout() не вызван должным образом, потому что внутри div у меня есть два элемента: div - это div, а другое - это span, свойство отображения которого равно none , и я должен использовать его, потому что у меня есть вызвать функцию из тела так плз помочь мнеjquery mouseout event problem12
<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>
Можете ли вы представить его на jsfiddle, пожалуйста? Поэтому я могу поиграть с ним и, возможно, смогу решить вашу проблему. – superkytoz
вы можете сделать то, что вы пытаетесь достичь –
вместо встроенного обработчика событий, я предлагаю вам использовать jquery для привязки событий типа '$ ('# div-slide-image0'). On ('mouseout', function () {}); ' –