Jquery：在div的悬停时附加一个类并在不悬停时删除

Posted 2023-05-08

【中文标题】Jquery：在div的悬停时附加一个类并在不悬停时删除

【英文标题】：Jquery: Append a Class on hover of a div and remove when not hover

【发布时间】：2013-05-05 21:02:25

【问题描述】：

我想在该 div 悬停时将一个类附加到该 div，并在它不悬停时删除该类。当我将鼠标悬停在另一个 div 上时，当它不在悬停时，应该再次添加和删除此类。有人说我在jquery中怎么做......

【参考方案1】：

您必须在 jquery 中使用 addClass 和 removeClass 函数

参考以下代码：

$(document).ready(function()      
    $('#secID, #thID').hover(function()     
        $('#oneID').addClass('red');    
    ,     
    function()    
        $('#oneID').removeClass('red');     
    );
);   

可以参考以下链接：

AddClass： http://api.jquery.com/addClass/

移除类： http://api.jquery.com/removeClass/

希望对您有所帮助。

【参考方案2】：

你可以试试toggleClass

$(function()
    $('#id').hover(function()
        $('#id2').toggleClass('classname');
    );
);

或者试试这个，因为hover 是no longer supported in jquery 1.9

$(function()
    $('#id').on('mouseenter mouseleave', function()
        $('#id2').toggleClass('classname');
    );
);

【讨论】：

我想指出，即使是一年之后，jQuery 确实支持悬停元素，对于任何查找此内容的人来说。不过，toggleClass 是个好主意。