Question

我在mouseenter上的某些asp按钮上添加了一个css类，并在mouseleave上删除了该类但是我没有看到新类的效果我在鼠标输入中添加的类仍然是那里。

我做的事情如下：

 <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            // mouse hover
            $("[id^='MangoPager_btn']").mouseenter(mouseenterfunction);
            // mouse leave
            $("[id^='MangoPager_btn']").mouseleave(mouseleavefunction);

        });

        function mouseleavefunction() {

            $(this).removeClass("pagerbtnHover");
            $(this).addClass("buttonclass");        }

        function mouseenterfunction() {

            $(this).addClass("pagerbtnMouseEnter");
        }

    </script>

离开鼠标时

我要删除pagerbtnMouseEnter课程，并希望附上buttonclass。

Answer 1

您没有删除正在添加的同一个课程......

$(this).addClass("pagerbtnMouseEnter");
$(this).removeClass("pagerbtnHover");

Answer 2

$（本）.removeClass（ “pagerbtnHover”）;

$（本）.addClass（ “pagerbtnMouseEnter”）;

你正在删除错误的班级....

Answer 3

您添加的是与您要删除的不同的类：

$(this).addClass("pagerbtnMouseEnter");

// should be $(this).removeClass('pagerbtnMouseEnter');
$(this).removeClass("pagerbtnHover");

确保两个类名都匹配，你不应该有问题。

另一方面，您可以使用hover()清除JavaScript，并摆脱$(document).ready()的使用：

$(function(){
    $("[id^='MangoPager_btn']").hover(function(){
        $(this).toggleClass('pagerbtnMouseEnter');
    });
);

Answer 4

更简单：将.hover()与一个参数一起使用，.toggleClass()。

$(function ()
{
    $("[id^='MangoPager_btn']").hover(function ()
    {
        $(this).toggleClass('pagerbtnMouseEnter');
    });
});

Answer 5

我建议您始终使所有按钮都具有buttonclass类，并使pagerBtnHover覆盖按钮类中的必要样式。摆脱pagerbtnMouseEnter类。然后，你可以这样做：

function mouseleavefunction() {
    $(this).removeClass("pagerbtnHover");
}

function mouseenterfunction() {
    $(this).addClass("pagerbtnHover");
}

Answer 6

不需要两次调用jQuery选择器，你可以链接。

$(this).removeClass('pagerbtnMouseEnter').addClass("buttonclass");

如果你想在其他地方使用它，你应该将检索到的元素粘贴到变量上，而不是一次又一次地调用相同的jQuery函数来查找它。

var $this = $(this);

// Use $this from here on...

如何使用jquery删除css类？

6 个答案: