鼠標懸停問題和jQuery問題

我有幾個塊的jQuery效果問題。 Mouseenter和mouseleave只能在第一個div區塊上工作，而在其他區域則不能。鼠標懸停問題和jQuery問題

這裏是JS：

 $(document).ready(function() { 

    $('#mainbox').mouseenter(
     function() { 
      $('#infobox').fadeIn(); 
     }); 
    $('#mainbox').mouseleave(
     function() { 
      $('#infobox').fadeOut(); 
     }); 

    });

而且還阻止：

<div id="mainbox"><div id="infobox" style="display: none;">first block - it works on  this one</div></div> 

<div id="mainbox"><div id="infobox" style="display: none;">2nd block - it doesn't work/div></div> 

<div id="mainbox"><div id="infobox" style="display: none;">3rd block - it doesn't work</div></div>

。你們有什麼想法的問題是什麼？

來源

2013-02-01 Maja Jelen

** ID必須是唯一的** –

你不能有相同ID的多個元素！。每個文檔的ID必須是唯一的。 – crush

[jQuery工具提示只適用於第一行表格]的可能重複（http://stackoverflow.com/questions/3497930/jquery-tooltip-only-works-for-first-row-of-table） – JJJ

的變化ID類：

<div class="mainbox"><div class="infobox" style="display: none;">first block - it works on  this one</div></div> 


<div class="mainbox"><div class="infobox" style="display: none;">2nd block - it doesn't work/div></div> 

<div class="mainbox"><div class="infobox" style="display: none;">3rd block - it doesn't work</div></div>

然後在JS：

$(document).ready(function() { 

$('.mainbox').mouseenter(
    function() { 
     $(this).find('.infobox').fadeIn(); 
    }); 
$('.mainbox').mouseleave(
    function() { 
     $(this).find('.infobox').fadeOut(); 
    }); 
});

來源

2013-02-01 14:53:11

的問題是：只有選擇目標文檔中的第一mainbox中的第一個信息框。

在API你可以閱讀：

每個值
ID必須在文檔中只能使用一次。如果多於一個元素被分配了相同的ID，那麼使用該ID 的查詢將僅選擇DOM中的第一個匹配元素。但是，不應該依賴此行爲 ;具有多個使用相同ID的元素的文檔無效。

而這就是爲什麼你的代碼不工作。

提示：交換機ID類和綁定鼠標事件，如DIV內搜索：

$('.mainbox').mouseenter(
    function() { 
    $(this).find('.infobox').fadeIn(); 
    }); 

$('.mainbox').mouseleave(
    function() { 
    $(this).find('.infobox').fadeOut(); 
});

來源

2013-02-01 14:54:40 Morv

鼠標懸停問題和jQuery問題

回答

相關問題