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

It is CSS' job! If all what a hover handler is doing is toggling a class , so do it like this:

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

just do:

<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 回答