mouseoverの問題といくつかの要素を隠す

私はjqueryとblueprint cssを使って、以下のコードで説明されている簡単な作業をしようとしています。基本的に、私はアイテムのリストを持っています、そしてアイテムを削除できるように各アイテムの最後にXを持っていたいと思います。マウスオーバー部分はやや機能しますが、クリックするとXの近くに行くと何らかの理由で消えます。 Blueprint 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に高さを指定するか、liのすべてに青色の.clearfixクラスを適用することができます。

編集：おそらくこれを修正する他の方法がありますが、これが最初に思い浮かぶのです。

これが役に立ちます。

出典

2009-09-02 06:38:28 theIV

正確に。要素に正しいサイズを割り当て、要素の浮動小数点数をクリアします。私はドロップダウンメニューで同様の問題を抱えていました - 第1レベルのliを移動したときにサブメニューが開きましたが、第2レベルを上回ったときに閉じました。そこにあったのは、第1レベルのLiにサイズが設定されていなかったことだけです。 –

mouseoverの問題といくつかの要素を隠す

答えて

関連する問題