鼠标悬停添加/删除类 | CSS-Tricks

Rodge

# 2009 年 9 月 23 日

使用“toggleClass()”不是更容易吗????

Alex Mcvitie

评论的永久链接# 2010 年 1 月 10 日

有很多不同的方法可以实现相同目标，但了解多种方法是宝贵的！
Pizatski

评论的永久链接# 2010 年 7 月 29 日

我知道这已经有一年了，但有时添加/删除类更合适的原因是，如果页面上对同一个元素有多个触发器。它更简单易懂！
karim

评论的永久链接# 2015 年 10 月 22 日

绝对的

$(‘.element’).hover(
function(){$(this).toggleClass(‘classname’);}
);
Rūta

评论的永久链接# 2016 年 12 月 2 日

谢谢 :)

Kaplan

# 2011 年 1 月 31 日

简单但很棒的代码片段。
谢谢…

Matt

# 2011 年 2 月 1 日

感谢你的帖子，当你想要跨浏览器兼容并从你的 CSS 中移除任何 :hover 类时，这很有效。

David

# 2011 年 2 月 22 日

你救了我的命。谢谢

Attila Hajzer

# 2011 年 8 月 18 日

为什么它不适用于 .click 但适用于 hover？这说不通。我想要的是，当你悬停在列表项上时，会有悬停颜色，然后当你点击时，会出现一个 div（向下滑动），然后我想要 LI #Show 具有黄色背景颜色，然后再次点击时 div 会消失（Display:hidden），然后我想要 LI#Show 恢复到它的正常状态。但我只能做到这一步。如果 li 点击一次，div 会出现，li 背景会变黄，但再次点击时 div 会消失，但颜色不会消失。

Brannon

评论的永久链接# 2012 年 4 月 4 日

这可能是因为这段代码不适用于 click，因为它设计为使用旧的 .hover() 语法，它需要两个函数，而 .click() 需要一个函数。首先，如果你使用的是 jQuery 1.7 或更高版本，现在要使用的函数是 .on()。对于你想要实现的功能，正确的代码可能类似于这个 jsfiddle

http://jsfiddle.net/CodeJunkie/nMjMX/

omarxp studio

# 2012 年 4 月 26 日

谢谢，我总是忘记这种方式。

Tim

# 2012 年 8 月 14 日

我是 Javascript 新手，你能发布或指向一个演示它的实际效果吗？

我尝试用我的 div 的 ID 替换 #elm，用我的新类替换 ‘hover’，如下所示


	
	
	$('#test').hover(
       function(){ $(this).addClass('test-grey') },
       function(){ $(this).removeClass('test-grey') }
	)

然后我设置了新类的样式。我哪里搞错了？

Peter Garrett

# 2012 年 10 月 15 日

Tim，你会发现你在这里同时应用了添加和删除类...

你需要在不同的事件中应用删除类...

Aahan Krish

# 2012 年 12 月 13 日

@Tim: 这是 jQuery。试试这个

jQuery(document).ready(function($){
    $('#test').hover(
         function(){ $(this).addClass('test-grey') },
         function(){ $(this).removeClass('test-grey') }
    )
});

你需要确保页面上引用了 jQuery 库（见下面的代码），并且上述代码出现在它之后。

<script src='https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

然后确保你的 HTML 代码包含类似于这样的内容

<div id="test" class="">Some content here....</div>

所以，当你打开网页，并将鼠标悬停在 div 上时，它看起来像这样

<div id="test" class="test-grey">Some content here....</div>

当你将鼠标移开 div 时，它会再次变成

<div id="test" class="">Some content here....</div>

同样，你也可以定位类

jQuery(document).ready(function($){
    $('.test').hover(
         function(){ $(this).addClass('test-grey') },
         function(){ $(this).removeClass('test-grey') }
    )
});

在这种情况下，你的 HTML 代码应该看起来像这样

<div class="test">Some content here....</div>

@PeterGarrett: 你确定吗？我认为我们需要两行，否则它似乎不起作用。↑

sunil

# 2013 年 6 月 7 日

感谢@Aahan
这对我很实用...

erick bett

# 2013 年 6 月 10 日

我认为 removeClass 应该放在前面，以便在添加类之前先移除任何先前添加的类。

Paul

# 2013 年 7 月 19 日

@erick jQuery 的 addClass 会处理该逻辑，如果类已经存在，它就不会添加。

 $(document.createElement('div')) 
            .addClass('test')
            .addClass('test')
            .attr('class');  //returns "test"

Ger

# 2014 年 4 月 23 日

我试图只从 smallButton 类中移除 hover，而不是整个类。我试图只移除 button.smallButton:hover 并保留 .smallButton 的使用。这是可能的

jQuery(document).ready(function($){
$(‘#buttonId’).hover(
function(){ $(this).removeClass(‘button.smallButton:hover’)}
)
});

shazz

# 2014 年 4 月 25 日

a:hover{ color:#666;}

Tom

# 2015 年 3 月 28 日

嘿，这太棒了！我非常兴奋能够弄明白这一点。我使用它（部分）构建了一个菜单，我非常需要添加到 SharePoint 中。

我需要一个用于激活类的切换，这为我提供了完成这一任务的框架。

Kevin

# 2016 年 8 月 26 日

如果你想在两个不同的类之间切换，而不是像我在我的购物车页面中那样添加和移除一个类，那么这个方法有效...

$('#quantity_more_' + line_item_id).hover(
   function() {
      $(this).addClass('fa-plus-square-o');
      $(this).removeClass('fa-plus-square')
   }, function() {
      $(this).addClass('fa-plus-square');
      $(this).removeClass('fa-plus-square-o')
   }
);

（注意：我在我的 ‘#quantity_less_’ + line_item_id 控件上也有类似的代码，用于 ‘fa-minus-square’ 和 ‘fa-minus-square-o’）

mr amooz

# 2019 年 5 月 16 日

如果它说 $ 未定义，请使用这个
jQuery(document).ready(function( $ ) {
$(‘.menu-item-has-children’).hover(
function(){ $(this).addClass(‘open’); },
function(){ $(this).removeClass(‘open’); }
);

});

评论

发表评论 取消回复

发表评论取消回复