悬停不起作用的列表中的项目

问题描述

老实说不知道我在做什么错 - 我想为悬停列表中的项目添加突出显示效果。 html代码如下：

Honestly not sure what I'm doing wrong- I want to add a highlight effect on hover for items in a list. The html is below:

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

我对jquery的了解如下：

And what I have of jquery is as follows:

$(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部分之前一切正常，当我将鼠标悬停在事物上时似乎没有任何事情发生。这不是浏览器问题，悬停工作正常，但不在列表中。我也尝试将'span'改为'li'，但这也不起作用。

Everything works until the toggleClass part, nothing seems to happen when I hover over things. It's not a browser issue, the hover works fine with other html elements that aren't inside the list. I have also tried changing 'span' to 'li' instead, but that didn't work either.

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

Would really appreciate any help with this. Thanks!

推荐答案

这是CSS的工作！如果所有 hover 处理程序正在执行的操作是切换类，那么可以这样做：

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>

这篇关于悬停不起作用的列表中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！