mouseover和隱藏一些元素的問題

我想用jquery和藍圖css做一個（所以我認爲）簡單的任務，這是在下面的代碼中說明。基本上，我有一個項目列表，並且我希望在每個項目的末尾有一個X，以便可以刪除項目，我還希望僅當用戶將鼠標懸停在列表項目上時才顯示X.鼠標懸停部分有些作用，但是當我靠近X點擊時，它由於某種原因而消失。藍圖CSS用於定位。代碼如下，它應該只是工作，如果插入一個空白的HTML文件：mouseover和隱藏一些元素的問題

<head> 
    <style type="text/css"> 
    .delete{ 
     display:none; 
    } 
    .entry{ 
     list-style:none; 
    } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/63795c8bfe31cbbfad726f714bf8d22770adc7ad/blueprint/screen.css" type="text/css" media="screen, projection"> 
    <script type="text/javascript"> 
    $(function(){ 
     $('.entry').live("mouseover", function(){ 
      $(this).find('.delete').css({'display':'inline'}); 
     }).live('mouseout', function(){ 
      $(this).find('.delete').css({'display':'none'}); 
     }); 
    }); 
    </script> 
</head> 
<div id="list span-24 last"> 
<ul> 
    <li class="entry"><div class="span-22">Something some thing some thing some thing some thing</div><div class="span-2 last"><a class="delete">X</a></div></li> 
</ul> 
</div>

來源

2009-09-02 FurtiveFelon

的span類應用float:left到它應用到元素。在你的情況下，因爲你的li裏有span，所以li沒有高度 - 它裏面充滿了浮動元素。

我不是一個專家，當談到事件冒泡的JavaScript，但我假設它的工作原理是事件冒泡只有當你滾過span-22，和第二你從它下車，因爲li沒有高度，你永遠不能夠滾到你的刪除。長話短說，你可以給你的高度li或將藍圖.clearfix類應用於所有的li s。

編輯：可能有其他方法來解決這個問題，但這些是第一個想到的。

希望這會有所幫助。

來源

2009-09-02 06:38:28 theIV

沒錯。爲元素分配正確的大小並清除元素的浮點數。我有類似的問題，下拉菜單 - 子菜單打開時，我移動了第一級李，但關閉時，我移動了第二級。所有這一切，是一級李沒有大小設置。 – 2009-09-02 06:57:29

mouseover和隱藏一些元素的問題

回答

相關問題