jquery mouseover/mouseout
In the following code once the mouse out is done the mouse over again does not work ,what is the work around for this
<!DOCTYPE html>
<html>
<head>
<style>
/* div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }*/
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="playControls" style="position:absolute; bottom:0px; left:0px; right:0px;color:blue;">
Mouse over me
</div>
<script>
$(document).ready(function() {
$("#playControls").mouseover(function () {
alert('here');
$("div:eq(0)").show("fast", function () {
/* use callee so don't have to name the function */
$(this).next("div").show("fast", arguments.callee);
});
});
$("#playControls").mouseout(function () {
alert('here');
$("div").hide(2000);
开发者_高级运维 });
});
</script>
</body>
</html>
This line hides all divs on your page:
$("div").hide(2000);
I don't think this is what you want. It will also hide the div which handles the mouseover/mouseout.
I think you meant:
$(this).next("div").hide(2000);
This will hide only the div you wanted.
Use the hover function. Its made specially for this usage pattern.
$("#playControls").mouseout(function () {
alert('here');
$("div").hide(2000);
});
In this part of your code, you hide all divs when you mouseout of div#playControls. The reason you can't fire the mouseover event of your div is because the div is hidden.
加载中,请稍侯......
精彩评论