在特定类名称上添加类到.hoverfunction – jQuery

因此，在整个文档中，我希望每次用户将鼠标hover在具有特定类名的元素上时，我希望添加一个类。

我的CSS看起来像这样：

.hotspot:hover, .hotspothover { border: 4px solid #fff; box-shadow: 0px 0px 20px #000; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; z-index: 1; } 

class级名称：“热点”。

我试过这个，但它似乎不起作用：

  $("#hotspot.hover #hotspothover").addClass("bubble bottom"); 

谢谢。

Answer 1

你很亲密！

添加逗号：

 $(".hotspot:hover, .hotspothover").addClass("bubble bottom"); 

Answer 2

这是怎么做的。

$（“。hotspot：hover，.hotspothover”）。addClass（“bubble bottom”）;

Answer 3

就像是

 $('.targetClass').hover(function() { $(this).toggleClass('hovered'); }); 

如果你使用jQuery 1.4.2应该工作

Answer 4

也许我误解了，但我想你想要在hover时添加它。 这表明：

 $('.hotspot, .hotspothover').hover(function(){ $(this).addClass('bubble bottom'); }); 

如果您希望它们在hover时也被删除，则将addClass更改为toggleClass 。

更新：提问者跟进并询问：

现在如果我想让他们取代’hotspot’或’hotspothover’会发生什么？ 对于页面中具有类热点或类“hotspothover”的所有项目，请将其替换为“bubble bottom”

我会改变它：

 $('.hotspot').hover(function(){ $(this).addClass('bubble bottom').removeClass('hotspot'); }); $('.hotspothover').hover(function(){ $(this).addClass('bubble bottom').removeClass('hotspothover'); }); 

现在，您也可以这样做，但如果您想要具体了解这些操作，那么将它作为两组调用更有意义。

 $('.hotspothover, .hotspot').hover(function(){ $(this).addClass('bubble bottom').removeClass('hotspothover hotspot'); });