1

私はjqueryとblueprintcssを使用して（私が思ったように）単純なタスクを実行しようとしています。これを以下のコードに示します。基本的に、アイテムのリストがあり、アイテムを削除できるように各アイテムの最後にXを付けたいです。また、ユーザーがリストアイテムの上にマウスを置いた場合にのみXを表示したいと思います。マウスオーバー部分は多少機能しますが、Xに近づいてクリックすると、何らかの理由で消えます。ブループリントcssはポジショニングに使用されます。コードは次のとおりです。空のhtmlファイルに接続すると機能するはずです。

<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>
4

1 に答える 1

2

spanクラスは、適用先の要素に aをfloat:left適用します。あなたの場合、 のspan内部があるliため、 にliは高さがありません。浮動要素で満たされています。

私は javascript のイベント バブリングに関しては専門家ではありませんが、それがまったく機能している理由は、 をロールオーバーしているときにのみイベントがバブリングしspan-22、2 番目に降りたときだけだと思います。にliは高さがないため、削除に進むことはできません。

簡単に言うと、高さを指定するか、ブループリントクラスをすべての にli適用することができます。.clearfixli

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

お役に立てれば。

于 2009-09-02T06:38:28.390 に答える