2

正直なところ、何が間違っているのかわかりません-リスト内のアイテムのホバーにハイライト効果を追加したいと思います。html は以下のとおりです。

    <div class="list">
        <h3 id="mainlist">YOUR LIST:</h3>
        <input type="text" class="newitem">
        <div class="additem">ADD</div>
        <ul></ul>
    </div>

そして、私がjqueryについて持っているものは次のとおりです：

$(document).ready(function() {
    $('.additem').click(function() {
        $('ul').append('<li class=listitem><span>' + $('.newitem').val() + '</span></li>');
    });
    $('.listitem').live ('click',function() {
        $(this).remove();
    });
    $('span').hover(function() {
        $(this).toggleClass('hover');
    });
});

toggleClass の部分まではすべて機能しますが、カーソルを合わせても何も起こらないようです。これはブラウザーの問題ではありません。ホバーは、リスト内にない他の html 要素で正常に機能します。代わりに「span」を「li」に変更しようとしましたが、それもうまくいきませんでした。

これについて何か助けていただければ幸いです。ありがとう！

4

3 に答える 3

2

CSSのお仕事です！ハンドラーが行っていることがすべてhoverclass の切り替えである場合は、次のようにします。

<style>
  li.listitem span:hover{
  /* CSS Rules */
  }
</style>
于 2013-08-11T07:30:44.470 に答える
1

ただ行う：

<style>
  li.listitem span:hover{
  /* some CSS */
  }
</style>
于 2013-08-11T07:32:06.313 に答える
0

これを試して：

$(document).ready(function() {
$('.additem').click(function() {
    $('ul').append('<li class=listitem><span>' + $('.newitem').val() + '</span></li>');
 $('span').hover(function() {
    $(this).toggleClass('hover');
 });
});
$('.listitem').live ('click',function() {
    $(this).remove();
});

});

基本的に、「ホバー」イベントハンドラーは、dom にない場合でもスパンにアタッチされると想定しています。要素を作成した後、要素にイベントを添付する必要があります。

于 2013-08-11T07:35:27.630 に答える