jquery的滑塊和鼠標懸停代碼

在下面的代碼，

<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;"></div> 
</body> 

<script> 
function tooltip(el) 
{ 
    $("#details").mouseover(function() { 
    $("#show").show("slide", {}, 1000); 
    }); 
} 
</script> 
</html>

在鼠標移到關鍵字的div。假設綠色網格框顯示出來，並將其顯示出來，這是如何實現的。

感謝.............

來源

2010-02-03 Hulk

的問題是永遠不會執行鼠標懸停函數內部的代碼。當一個鼠標懸停發生時，jQuery被用來重新分配一個函數給mouseover，而它應該被執行。

做以下修改：

從細節DIV的onmouseover刪除：

<div id="details">keyword</div>

當文件被寫入加載執行tooltop功能：

<script> 
$(document).ready(function(){ 
{ 
    $("#details").mouseover(function() { 
     $("#show").show("slide", {}, 1000); 
    }); 
} 
</script>

來源

2010-02-03 14:15:53 jsalonen

謝謝..................................... ....... – Hulk 2010-02-03 14:29:06

你每次連接鼠標懸停邏輯用戶將鼠標移動到你的元素。你不需要把這個邏輯包裝在一個函數中，而不是你的情況。

$(function(){ 
    $("#details").mouseover(function(){ 
    $("#show").show(); 
    }); 
});

下面的配置變得過時：

<div id="details" onmouseover="javascript:tooltip(this);">

通過編寫$("#details").mouseover()我們已經宣佈這個邏輯。現在不需要通過HTML將其放置在元素的mouseover屬性中。您應該留下：

<div id="details">

來源

2010-02-03 14:20:19 Sampson

謝謝................................. – Hulk 2010-02-03 14:30:15

jquery的滑塊和鼠標懸停代碼

回答

相關問題