jquery - 悬停不适用于列表中的项目

老实说，我不确定自己在做什么错-我想为悬停列表中的项目添加突出显示效果。的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”，但这也不起作用。

非常感谢您的帮助。谢谢！

最佳答案

这是CSS的工作！如果hover处理程序所做的所有事情都是在切换一个类，则可以这样进行：

<style>
  li.listitem span:hover{
  /* CSS Rules */
  }
</style>

关于jquery - 悬停不适用于列表中的项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18169739/