jquery slider and mouseover code
All,
In the code below,
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.slide.js"></script>
<style type="text/css">
#show { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
</style>
</head>
<body>
<div id="details" onmouseover="javascript:tooltip(this);">keyword</div>
<div id="show" style="display:none;">开发者_如何学Python;</div>
</body>
<script>
function tooltip(el)
{
$("#details").mouseover(function() {
$("#show").show("slide", {}, 1000);
});
}
</script>
</html>
On mouse over keyword div. the green grid box is suppose to be shown ans on mouse out it should.How is this achieved.
Thanks.............
The problem is that code inside mouseover function is never executed. When a mouseover even occurs, jQuery is used to reassign a function to mouseover, while it should be executed instead.
Make the following changes:
- Remove onmouseover from details div:
<div id="details">keyword</div>
- Execute tooltop function when document is loaded by writing:
<script> $(document).ready(function(){ { $("#details").mouseover(function() { $("#show").show("slide", {}, 1000); }); } </script>
You're attaching mouseover logic every time the user mouses over your element. You don't need to wrap this logic in a function, not in your case.
$(function(){
$("#details").mouseover(function(){
$("#show").show();
});
});
Now the following line becomes obsolete:
<div id="details" onmouseover="javascript:tooltip(this);">
By writing $("#details").mouseover() we have already declared this logic. There's no need to place it in the mouseover attribute of the element via HTML now. You should be left with:
<div id="details">
加载中,请稍侯......
精彩评论