鼠標懸停不起作用

我有以下代碼不起作用
我在彈出窗口中創建了這個div，通常會在彈出窗口中顯示20個div。
我正在嘗試mouseover它不工作，如果我在div本身的工作mousover事件。
有任何錯誤。鼠標懸停不起作用

<div dataindex="0" class="clstImages" id="dlstImages0"><img alt="Almond Branches in Bloom, San Remy, c.1890" title="Almond Branches in Bloom, San Remy, c.1890" src="http://imagecache5d.art.com/CropHandler/crop.jpg?img=21-2107-SA3ED00Z&amp;x=0&amp;y=0&amp;w=400&amp;h=400&amp;size=2&amp;maxw=100&amp;maxh=100&amp;mode=sq&amp;q=100" id="eachimg"> 
</div>

$('.clstImages img').hover(function() { 
    alert("mouseover"); 
}, function() { 
    alert("mouseout") 
});

來源

2010-10-22 kobe

創建的div（圖像）的內容是動態的嗎？ – 2010-10-22 23:33:29

它的動態，每個彈出框共有20個div，圖像位於上面的div內。 – kobe 2010-10-23 02:34:05

任何想法，爲什麼它不工作 – kobe 2010-10-23 04:29:46

您的懸停功能很好，但您需要將其包裝在$(document).ready()函數中。

我相信你正試圖在DOM完成加載之前運行腳本。在執行其內容之前，使用$(document).ready()等待DOM完成加載。下面是該函數jQuery .ready()

你也應該記住關閉圖像標記

<img src="someimage" >參考無效HTML

<img src="someimage" />是有效的HTML

你也應該記住，結束您的JavaScript statments。以下行未被終止。

alert("mouseout")

應該

alert("mouseout");

注意分號末

下面是一個工作demo http://www.jsfiddle.net/R7KmW/

編輯

看起來你的元素沒有實際填充，直到你點擊方向箭頭。你可能想嘗試使用live（）或delegate（）。基本上這兩個Jquery方法允許你綁定到未來的DOM元素（使用代碼插入的元素，即AJAX，動態創建元素）。我知道這種類型的答案已經發布給你，但我真的沒有更多的時間來調試你的整個頁面的問題。我很抱歉沒有提供更好的答案，但也許您可以創建一個具有相同功能的圖像的小測試，然後嘗試以這種方式進行調試。

$(document).ready(function() { 
    $('.clstImages img').live('mouseover', function() { 
     alert("mouseover"); 
    }) 
    .live('mouseout', function() { 
     alert("mouseout"); 
    }); 
});

來源

2010-10-23 06:02:25

正確，但不需要在最後一個語句中使用分號。 JS Minifers實際上刪除了這些:)另外，我推測它已經在'$（document）.ready（）'裏面了，因爲他已經成功創建了工具提示。 – Marko 2010-10-23 06:04:24

@Marco你在分號上的權利..但是爲了安全起見，如果你在開發中修改你的代碼並且在缺少分號後留下一行，那麼安全的做法是始終放分號。準備好發佈代碼時，請縮小或隱藏JavaScript以縮小文件的大小。但是，當文件用於開發時，我總是嘗試遵循推薦的語法，而不是縮小或隱藏。 – 2010-10-23 06:10:26

我覺得還有一些其他的問題，我的鼠標懸停功能只是在ready函數中。如果您有時間可以嘗試此處的示例，請鍵入http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=76947CF94DBD4E59981ADAA5E7C14F65鼠標懸停在該圖庫頁面中的任何圖像，然後單擊一個的方向，你會圖像網格，這就是我想添加mousover事件，它不工作 – kobe 2010-10-23 06:32:20

更新 <img>標籤是自閉的，而不是<img src="..">，所以你應該寫<img src="..." />注意最後的斜槓。**

使用jQuery的live()方法

描述：將事件處理程序附加到與當前選擇器匹配的所有元素，現在和將來。

$('.clstImages img').live("mouseenter", function() { 
    alert("mouseenter"); 
}); 
$('.clstImages img').live("mouseleave", function() { 
    alert("mouseleave"); 
});

或者當你創建<img>，分配一個click事件直接（這可能是一個更好的方法）。

來源

2010-10-22 23:41:43 Marko

或將它們結合在一個單一的綁定：'$（'selector'）。live（'mouseover mouseout'，function（event）{if（event.type =='mouseover'）{/...} else {// ...}}）;' – Alec 2010-10-22 23:52:57

這也不起作用 – kobe 2010-10-23 00:06:04

鼠標懸停不起作用

回答

相關問題