JQuery:如何在鼠标悬停时设置样式并删除其他样式？[JSFiddle inside]
在鼠标悬停时设置样式并删除其他样式，可以使用jQuery来实现。下面是一个示例代码，演示了如何在鼠标悬停时设置样式并删除其他样式：
<!DOCTYPE html>
<html>
<head>
<title>Hover Style Example</title>
<style>
.hovered {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script>
$(document).ready(function() {
$('.box').hover(function() {
$(this).addClass('hovered'); // 添加悬停样式
$('.box').not(this).removeClass('hovered'); // 删除其他样式
});
});
</script>
</body>
</html>在上面的代码中，我们使用了jQuery的hover方法来监听鼠标悬停事件。当鼠标悬停在.box元素上时，会触发回调函数。在回调函数中，我们使用addClass方法为当前元素添加名为hovered的样式类，实现设置样式的效果。同时，使用not方法和removeClass方法来删除其他.box元素的样式，以确保只有当前元素具有悬停样式。
你可以将上述代码复制到一个HTML文件中，并在浏览器中打开该文件，即可看到效果。当鼠标悬停在一个盒子上时，该盒子会变成黄色背景，其他盒子则恢复为默认样式。
推荐的腾讯云相关产品：无
希望这个答案能够满足你的需求。如果有任何疑问，请随时提问。
相关·内容
这是JSFiddle链接：
我想添加一个悬停功能，以便将鼠标悬停在菜单上将应用该菜单选项卡上的.current样式，同时将其从当前打开的选项卡中删除。如何做到这一点？
浏览 21提问于2017-02-17得票数 2
回答已采纳
3回答
我有一张表，样式是这样的： background-color: #aaaaff;然后，我在此行上有一个click处理程序，用于从表中删除该行并将其添加到另一个表中当我单击鼠标时，我当然会将鼠标悬停在行上，因此应用的是样式。我的问题是，当我将它附加到另一个表中时，悬停样式并没有被删除。如何在jQuery中删除样式</e
浏览 1提问于2011-10-17得票数 1
4回答
我在span标记中有一个h3元素，当然它不应该放在那里，但是我似乎不能以我想要的方式在div中设置跨区文本的样式。如果你将鼠标悬停在jsfiddle中的图像上，隐藏的div就会显示出来，这正是我想要的样子，但如果我把h3标签从文本中去掉，我似乎无法用CSS对其进行样式设置。我是否应该考虑使用Jquery替代方案？如果是这样的话，任何指南的教程都会很棒，谢谢
更新:感谢你到目前为止的帮助，但我不认为我已经解释得很好了。左边是我想要的样式，但是删除
浏览 0提问于2011-06-09得票数 0
回答已采纳
我正在尝试删除我的树状地图的标签。虽然我确实想在将鼠标悬停在树形图的正方形上时显示名称；但我正在尝试删除每个正方形的标题，如In Store, Retail, Online, Street Vendors等。但就像前面提到的，我确实想在悬停时显示标题，这就是为什么我没有完全删除名称的原因； 我曾尝试通过编辑dataLabels对象和设置enabled: false来实现此目标，我还调整了字体样式和对齐方式，以下是我的highchart
浏览 22提问于2020-07-11得票数 0
回答已采纳
我有一个缩略图项目的列表，其中包含一个隐藏的弹出式容器，只有当我将鼠标悬停在这些项目上时才会显示。该容器包含一个充当幻灯片的<li>的<ul>。我试图实现的是每次用户悬停在缩略图上时从头开始幻灯片放映，并在用户悬停时停止它。我试着在悬停时循环(‘stop’)，但当幻灯片重新开始时，它在第二张幻灯片上停止。
有什么帮助吗？
浏览 0提问于2012-03-23得票数 0
4回答
我几乎不知道JavaScript或jQuery，也不知道如何从它们调用事件，特别是像这样。谢谢
浏览 0提问于2014-04-29得票数 0
我有一个元素，它应该有一个背景图像，但是在样式表中给出的样式是我无法访问/修改的： background: none !important;可以用jQuery撤消这种样式吗？我尝试以两种方式添加background: inhert!important和jQuery :通过添加内联样式和删除应用样式。更新2:我不能编辑样式表。我已经把标题改得更清楚了。我必须用jQuery</
浏览 11提问于2013-07-24得票数 18
回答已采纳
我正在使用，并试图让样式稍有不同。基本上，当我将鼠标悬停在带有ul的菜单上时，下拉菜单就很好了。当我将鼠标悬停在下拉列表中的元素上时，文本颜色就很好了，因为我用:hover设置了该元素的样式。当我不将鼠标悬停在该元素上时，它使用顶层的颜色。我的CSS
我必须使用jQuery .addClass才能让它保持白色吗？
浏览 3提问于2012-01-17得票数 4
回答已采纳
1回答
css类不工作
、、、
我已经设置了一堆div，当你将鼠标悬停在父div上时，我试图在子div上交换类。现在我正在尝试使用jQuery，但我也很乐意使用伪类。悬停不起作用，我认为这是因为样式被列为内联，但当我从内联中删除样式并将其作为一个类执行时，整个div就消失了。假设它是一个3d堆栈，所以它只是一个带有白色背景和不透明度集的div。z-index:12; width:46px; o
浏览 0提问于2012-03-22得票数 0
如何在jQuery('.dropdown-menu').removeAttr('style');菜单旁边删除这两种内联样式，我尝试了remove属性.dropdwon，遗憾的是它没有删除内联样式。每次我将导航线悬停时，内联样式更改为显示块，当它悬停时，内联样式设置为display:none
<ul role="menu" class=
浏览 0提问于2017-06-01得票数 4
我是jQuery的新手，我已经使用过它，并在画廊和滑块中使用过它。我需要能够有扩展的divs。一开始它只显示图片，但当您悬停div向上扩展，并显示图片和文字伴随它。
我能弄明白大多数事情，但这让我感到困惑。有什么想法吗？
浏览 0提问于2012-07-31得票数 3
回答已采纳
如果在伪元素之前或之后设置了“content”属性，我如何在javascript中签入(使用jQuery)？在chrome中，window.getComputedStyle(elem, '::before').getPropertyValue('content')在“content”设置为空字符串和未设置内容时都返回空字符串我想出了一个解决方案:设置其他属性，如宽度和高度，并检
浏览 3提问于2014-09-16得票数 0
回答已采纳
我正在尝试制作一个带方形边框的按钮，但每当我尝试更改按钮的样式时，它都会删除与之相关的默认样式。例如，我在这里找到了一些代码来删除边框并使其具有类似的外观，但它删除了当鼠标悬停在按钮上时使其具有动画效果的触发器。VerticalContentAlignment}"/> </ControlTemplate>
浏览 0提问于2016-05-18得票数 2
1回答
如何在jquery标题栏中显示与默认关闭按钮具有相同按钮样式的图标，并带有"?“而不是"x"？在本例中为红色图标。我完全不能做到这一点。 background-color: red;}
<script src="http://code.jquery.com/jquery-1.11.3.min.js"&
浏览 20提问于2016-07-27得票数 0
回答已采纳
1回答
我有一个jquery下拉菜单与jquery和css来样式化它。请在此处查看页面及其工作原理：
我在Safari中注意到了这一点。这可能并不是在所有浏览器中都很明显。但是，此站点的主要用户将是Safari用户。
浏览 2提问于2011-01-14得票数 1
2回答
如果我有这个CSS：a:hover { color: red; }ID下的链接在悬停时始终显示为黑色
浏览 82提问于2009-04-05得票数 5
回答已采纳
我有一个水平导航栏，当其中一个链接被选中时，该链接就会变成粗体。然而，当我点击一个时，它右边的项移动了位置，因为字体变得更大了，从而使列表项的宽度变大。有什么办法可以避免这种情况吗？
浏览 1提问于2012-07-27得票数 0
回答已采纳
2回答
我正在向带有jQuery的元素中添加一个CSS规则。例如$('#any-el').css('outline', '1px solid red')。我后来用$('#any-el').css('outline', '')删除了样式。我不想干扰这个元素可能具有的任何其他样式，并且我发现这个方法对于添加了外部或内联样式表的CSS很好，但是它(显然)会修改并<e
浏览 4提问于2014-10-02得票数 1
回答已采纳
4回答
我正在探索如何设置表格的样式，以便当鼠标悬停在列上时可以更改边框。
为了突出显示，我在jQuery库中使用了以下JavaScript代码： border-right: 2px solid black;
border-left: 2px solid bl
浏览 4提问于2012-11-21得票数 7
回答已采纳
我想样式化的标准window.confirm不使用任何额外的JavaScript代码，只与CSS。这有可能吗？如果是的话，我该怎么做呢？
浏览 0提问于2011-05-31得票数 39
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
