文章/答案/技术大牛

发布

css鼠标悬浮

CSS鼠标悬浮基础概念

CSS鼠标悬浮（Hover）是一种伪类选择器，用于定义当用户将鼠标指针悬停在元素上时该元素的样式。通过:hover伪类，可以为元素添加动态效果，提升用户体验。

类型

文本颜色变化：当鼠标悬停在文本上时，改变文本的颜色。
背景颜色变化：当鼠标悬停在元素上时，改变元素的背景颜色。
边框变化：当鼠标悬停在元素上时，改变元素的边框样式或颜色。
透明度变化：当鼠标悬停在元素上时，改变元素的透明度。
动画效果：当鼠标悬停在元素上时，触发一些简单的动画效果，如缩放、旋转等。

应用场景

导航菜单：在导航菜单中，当用户将鼠标悬停在某个菜单项上时，改变其背景颜色或字体颜色，以突出显示当前选中的菜单项。
按钮：在按钮上添加鼠标悬浮效果，当用户将鼠标悬停在按钮上时，改变按钮的背景颜色或边框样式，以提示用户该按钮可点击。
图片预览：在图片列表中，当用户将鼠标悬停在某张图片上时，显示该图片的放大预览效果。
工具提示：在某些元素上添加鼠标悬浮效果，当用户将鼠标悬停在元素上时，显示相关的提示信息。

示例代码

以下是一个简单的CSS鼠标悬浮效果示例，当鼠标悬停在按钮上时，改变按钮的背景颜色和字体颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Example</title>
    <style>
        .btn {
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

        .btn:hover {
            background-color: #0056b3;
            color: #ffcc00;
        }
    </style>
</head>
<body>
    <button class="btn">Hover Me</button>
</body>
</html>

参考链接

MDN Web Docs: CSS :hover Selector

常见问题及解决方法

鼠标悬浮效果不生效：
- 确保CSS选择器正确，能够选中目标元素。
- 确保CSS样式没有被其他样式覆盖。
- 确保HTML结构和CSS选择器匹配。

鼠标悬浮效果延迟：
- 可能是由于CSS过渡效果设置不当导致的，可以调整过渡时间或移除过渡效果。
- 如果使用了JavaScript或jQuery来实现鼠标悬浮效果，确保脚本没有引入延迟。
鼠标悬浮效果在不同浏览器中表现不一致：
- 确保使用的CSS属性和值在目标浏览器中得到支持。
- 使用CSS前缀（如-webkit-、-moz-等）来兼容不同浏览器。

通过以上内容，您应该对CSS鼠标悬浮有了全面的了解，包括其基础概念、优势、类型、应用场景以及常见问题的解决方法。

页面内容是否对你有帮助？

有帮助

没帮助

悬停在JQuery和CSS上

jquery、css

我的目标是，如果在悬浮时，如果单元格已经处于活动状态，则悬浮的TD将是黑色的(用于失活)，而对于仍然不活跃的单元格，则为橙色(用于激活)。(仍然是橙色或黑色，甚至鼠标离开)我应该使用什么事件？$("td").hover(function(){ $(this).css( "background-color", "orange");

浏览 6提问于2014-03-05得票数 0

1回答

引导水平下拉菜单

html、css、twitter-bootstrap

World</h2> <h2>Hello World</h2></div>这是我的CSS

浏览 3提问于2013-09-10得票数 0

回答已采纳

1回答

css动画之间的平稳过渡

css、rotation、transition、keyframe

我目前正在编码一个可扩展的框，在克服了关闭的悬停故障之后，我意识到有一种特殊的情况，在这种情况下，我无法得到我想要的行为方式。上述情况:当我在圆圈上悬停时，点击它并立即取出光标，加号旋转一点，然后大致跳到想要的位置(虽然当我悬停在圆圈上，点击它并保持光标在里面时，效果非常好和平滑)。

浏览 4提问于2014-06-20得票数 0

回答已采纳

1回答

每当鼠标停留在元素上，CSS translateX()动画就会重置

css、animation、translate

嗨，我只做CSS动画，我需要在这里的卡片上显示一个块，这是0%和100%的动画转换，用:悬浮来激活自己。我的需要是使动画停留在屏幕上，只要我的鼠标是在元素上。 TYsm

浏览 3提问于2022-03-13得票数 0

1回答

使用鼠标进入和退出时闪烁

javascript

我试图创建一个效果，当鼠标移动到图像上时，它应该在图像上显示一个半透明的黑匣子，并在上面显示一些细节。这些div包含图像和问题是这个鼠标和鼠标事件正在创造闪烁的黑色半透明的div添加到顶部。

浏览 3提问于2014-01-07得票数 0

回答已采纳

6回答

如何将图像设置为鼠标上方的div？

html、css

我在做一些css的事情，<img src="some image url"></div>即。但是两者都应该显示，封闭的图像应该只出现在鼠标结束时。CSS： .myDivClass:hover{

浏览 11提问于2014-05-26得票数 1

回答已采纳

1回答

如何在JavaFX TableView中行悬停时使某些事情发生？

java、javafx

现在，当在表视图中选择一行时，我在鼠标位置显示了对话框。当我悬停在每一行时，我希望对话框显示出来，这里似乎有一个CSS :悬浮，所以我假设它可以以某种身份在java代码中捕捉到。

浏览 0提问于2014-10-09得票数 2

回答已采纳

2回答

用于多Ids的Css代码

css

我的字体是#fff，鼠标上方是#3 3cf。我很困惑如何使用多个I和a:悬浮来编写css。

浏览 6提问于2015-05-13得票数 0

回答已采纳

4回答

如何使两个元素同时盘旋？

javascript、jquery、html、css、hover

如何使两种元素同时悬浮在不同的位置？bro:hover {} background: url(imgSIS.jpg);如果我把鼠标放在如果鼠标结束#sis也是一样的。有人能帮我吗？解决方案可以是CSS或JS，请。

浏览 6提问于2015-08-27得票数 1

回答已采纳

1回答

如何使用扩展的父容器扩展SVG？

css、svg

当用户在该div上移动时，我使用CSS转换将其高度提高一倍。我希望SVG的高度随父div的变化而变大。目前，当我在父div上鼠标操作时，它的高度与SVGs的高度一样发生了适当的变化，但是当我鼠标退出时，它的高度立即下降到它的原始值。" y2="40" style="stroke:white; stroke-width:4" /> </a> </div>

浏览 1提问于2016-03-12得票数 0

回答已采纳

1回答

在div上鼠标悬停显示光标旁边的菜单

javascript、html、css、cursor

我有一个表，当用户悬停在行上时，我想在该表上显示按钮组。这是我知道我需要的。

浏览 2提问于2020-02-26得票数 0

1回答

使用JQuery中的悬停()方法突出显示一个按钮，并结合JQuery单击按钮

jquery

但是当我把鼠标悬停在上面的时候，我想让按钮突出显示。为了满足这个要求，我使用悬浮()并单击() JQuery方法。单击可以正常工作，但是当我添加悬停时，它不仅不能工作，而且还会阻止单击事件的工作。<input src="button.png" class="menuButton" type="image"></div>CSS</e

浏览 3提问于2015-07-15得票数 0

回答已采纳

1回答

鼠标悬停时触发哪些DOM事件，可以模拟这些事件吗？

javascript、jquery、dom、event-handling、mouseevent

在网站上有一个类别下拉列表，当鼠标悬停在菜单项上时，这个下拉列表就会激活(例如，HTML、市场部、CMS)。但是，我似乎无法中断附加到它的任何DOM事件(使用Firefox调试器进行检查)。预期的事件侦听器类似于鼠标右键。

浏览 2提问于2016-06-27得票数 0

回答已采纳

3回答

jquery .hover()混淆

javascript、jquery、css

现在我也想改变链接的颜色，当我将鼠标悬停在链接所引用的站点的不同部分上时。所以我写了这个：$('#portfolio').hover(function() { }, function() { $('#portLink').css('color',&

浏览 6提问于2014-04-05得票数 0

回答已采纳

2回答

通常使用css* :悬停来更改链接的颜色*

jquery、hover

我如何使用jquery来实现链接的悬停效果，这个链接通常是用css :悬浮的，所以当我在链接上悬停时，它会改变为不同的颜色，而当我的鼠标离开链接时，它会返回到以前的颜色？

浏览 3提问于2011-09-01得票数 1

回答已采纳

1回答

我是网页开发的初学者，当我把鼠标悬停在菜单列表上时，下拉菜单就会一直显示在每个菜单中。什么地方出问题了？我试着移除css中的"ul li ul li“，但是它不起作用，而且当我尝试”..site header nav li:悬浮.子菜单“-关于”没有输出但是“..site header导航:悬浮.子菜单-关于”我在使用时也有同样的问题“..site header ul :悬浮.子菜单-关于”仍然是相同的问题。“.sub-menu-about{ displa

浏览 0提问于2019-09-15得票数 0

回答已采纳

5回答

jquery悬停更改单击效果

jquery、list、click、hover

我有一个无序的列表作为菜单，使用jquery具有悬停效果(而不是css，因为我计划在悬停时对其他元素进行其他更改)。我在点击和禁用悬停的效果，以防止它改变鼠标，但我似乎无法完成这个简单的任务。选择其他项目时删除先前的效果 $(document).ready(function(){$('li').hover(function(){}, f

浏览 7提问于2013-04-12得票数 1

回答已采纳

2回答

是否可以仅使用CSS显示下拉菜单？

html、css、drop-down-menu

有没有人试过制作或看到一个只有CSS而没有javascript的下拉菜单。我知道使用javascript可以很容易地实现这一点，但是我希望它能够与纯CSS一起工作。谢谢编辑:有许多例子的下拉:悬停，我还没有看到一个例子，一个点击触发的css下拉列表。

浏览 5提问于2013-11-18得票数 0

回答已采纳

1回答

mouseLeave事件从未触发

html、hover、mouseleave

function() {}, function() {});不过，mouseLeave事件只是在离开iframe而不“触摸”覆盖的窗口控件元素时触发的。因此，如果我在用鼠标离开时触摸到这些元素，“悬停”类就不会被移除(事件根本不会触发)，所有应用于css的“：悬浮”选择器

浏览 0提问于2015-03-27得票数 1

2回答

在firefox中删除悬停状态的下划线

css、firefox、underline

我在我的网站上添加了一个可以翻转以显示更多文本的悬浮滑板。它只适用于Chrome，所以我试着在Firefox中将其关闭。它在Firefox中不再翻转，但它使框在悬停时有一个灰色下划线。我就是想不出哪个CSS会有这样的效果。(删除)-将鼠标悬停在"Sort Products By Availability“上，查看我所指的内容。谢谢！！

浏览 0提问于2012-06-15得票数 1

点击加载更多

css鼠标悬浮