Question

老实说不确定我做错了什么 - 我想为列表中的项目悬停添加高亮效果。 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'，但这也不起作用。

真的很感激任何帮助。谢谢！

Answer 1

这是CSS的工作！如果hover处理程序正在做的就是切换一个类，那么就这样做：

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

Answer 2

只是这样做：

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

Answer 3

试试这个：

$(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中。您必须在创建元素后将事件附加到元素。

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

3 个答案: