本文介绍了悬停不起作用的列表中的项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

老实说不知道我在做什么错 - 我想为悬停列表中的项目添加突出显示效果。 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>

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

08-12 06:53