文章/答案/技术大牛

发布

css悬停样式

CSS悬停样式基础概念

CSS悬停样式（Hover Effect）是指当用户将鼠标悬停在某个HTML元素上时，该元素的样式会发生变化。这种效果可以通过CSS的: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 Effect</title>
    <style>
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <button class="button">Hover Me</button>
</body>
</html>

参考链接

MDN Web Docs: CSS :hover Selector

常见问题及解决方法

悬停效果不生效：
- 确保CSS选择器正确。
- 确保CSS文件已正确链接到HTML文件。
- 确保浏览器支持:hover伪类。

悬停效果延迟：
- 使用transition属性来平滑过渡效果。
- 调整transition的持续时间。
悬停效果在不同设备上表现不一致：
- 使用CSS前缀（如-webkit-, -moz-）来兼容不同浏览器。
- 使用CSS框架（如Bootstrap）来统一样式。

通过以上方法，可以有效地解决CSS悬停样式的相关问题，并提升用户体验。

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

有帮助

没帮助

当子元素悬停时，是否可以取消父元素悬停样式？

css

父div和子div都定义了悬停样式，但是当子元素悬停时，我希望取消父元素悬停样式(只使用css)。有可能吗？

浏览 4提问于2014-03-26得票数 2

回答已采纳

2回答

CSS:为什么当悬停停止时，悬停动画会停止？

html、css、css-animations

以以下CSS为例 .button { height: 100px;} transform: scaleX(5);} 这是在悬停时触发的，但当鼠标离开按钮时，div将返回到其原始状态。

浏览 22提问于2020-12-04得票数 0

回答已采纳

1回答

如何设置此元素的样式

jquery

如果元素被悬停，我有这个脚本来设置box-shadow。它还应该同时删除父样式： boxShadow : "inset 0px 0px 0px 1px #f80" boxShadowcss(on); }, function() { $(this).css(out); });如果您查看此示例，您将

浏览 0提问于2013-03-24得票数 1

4回答

Jquery追加悬停css样式

jquery、css

我想追加一些悬停样式样式到一些按钮使用jQuery，我目前有它，所以它添加了我想要的样式，但当你没有悬停按钮时，样式留下来。下面是我的代码： $('#all').css({backgroundColor: '#3DC0F1', color: '#ffffff'})

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

1回答

悬停样式CSS

html、css

尝试让我的样式正确地工作于一些我创建的悬停框，但它并不是太好… 我已经有了大概的想法..这是当你将鼠标悬停在项目上时，右侧的项目会变得可见，依此类推。另一件事给我带来了一个问题，在最后的悬停位置上显示部件号时，我不能让它出现在相应产品的右侧(它过去都显示在1行上)，但我必须相对地定位它，然后更改位置，所以现在当我将鼠标悬停在产品上时，每行之间会有一个空格

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

1回答

如何使悬停的菜单项保持打开状态，以便使用firebug编辑它的样式？

css、firefox、firebug

我单击firebug图标，然后悬停在菜单项上，以检查它在firebug编辑器上的css然后，我悬停在样式编辑器上，以改变它们的某些内容，并且由于菜单关闭，css失去了焦点如何使悬停菜单保持打开，这样我就可以用firebug编辑它的样式了？

浏览 1提问于2014-06-25得票数 1

回答已采纳

1回答

从css更改段落样式的层次结构问题

css、hover

我想更改段落样式样式覆盖它。<div class ="b"> <p>BBBB</p></div></div> text-align: center; .

浏览 17提问于2020-03-10得票数 0

回答已采纳

1回答

IE和Firefox中的闪烁下拉菜单

jquery、css、drop-down-menu、navigation

我认为这是一个CSS的问题，但我无法解决它的生活。 var $this = $(this); }, var $this = $(this); if( $this.children('ul.level-2').css</em

浏览 1提问于2013-05-24得票数 0

回答已采纳

1回答

CSS属性在jquery运行后不会保留

jquery、css

fx.end.radius - (fx.end.radius * fx.pos)) $(fx.elem).css('text-shadow', fx.end.color + ' 0 0 ' + updatedRadius + 'px'); $(fx.elem).css('text-shadowbind('mouseenter',

浏览 2提问于2012-09-23得票数 2

3回答

类似jquery实现的firebug

jquery

我想实现一个firebug，比如当我的光标悬停在一个元素上时高亮显示{}){}); 但是，当光标悬停在内部元素上时，它不会更改样式，外部元素的样式仍然会更改，而不是由于m

浏览 7提问于2011-04-20得票数 1

回答已采纳

1回答

我已经被要求修复一些问题在Wordpress网站上使用常规的CSS，JS & HTML。其中一个问题是产品页面上显示的奇怪的悬停效果：如果您愿意帮忙，最好是，但我也会在这里解释这个问题。通过强制devtools中的元素状态悬停并查看更改，我已经确认了这实际上是对<tr>元素的悬停效应。我还确信这不是Javascript，因为元素不会更改类，并且在悬停时没有对元素应用样式。我认为唯一的选择是，它是一个CSS悬停效应。通常在

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

回答已采纳

3回答

如何检查带有firebug的CSS伪类？

css、firebug、hover、pseudo-class

我正在为一种不情愿的a:hover css样式而苦苦挣扎，我无法覆盖它。我已经看到：但我还没有想出如何重现上面提到的步骤。另请注意:伪幻象如何使用Firebug检查/调试像:hover这样的CSS伪类？

浏览 0提问于2011-03-22得票数 26

回答已采纳

3回答

当用户按住鼠标按下时应用样式？

css

我在我的项目中有一个按钮，我试图删除outline属性，这个属性对于使用的CSS主题是默认的。在没有应用伪类的情况下，我能够应用CSS规则，也可以应用于:hover和:focus。下面是我的CSS (覆盖默认主题，这不是主题本身的CSS )：// whenAddButton:hover { borde

浏览 1提问于2018-08-14得票数 1

回答已采纳

1回答

单击jquery时应用鼠标悬停primefaces按钮的样式

jquery、css、google-chrome、primefaces、firebug

我想在jquery单击一个primefaces按钮时应用它的悬停样式$("#prix").live('click', function(){但它不起作用如何在单击按钮时应用<em

浏览 4提问于2013-04-15得票数 0

1回答

是否可以只在github标记中的悬停中显示文本？

markdown、github-flavored-markdown

我想知道是否有可能有一个“扰流板文本”，也就是说，不同于，只有当鼠标悬停在它上时，才能看到它的文本，在GitHub调味的Markdown中。

浏览 6提问于2022-12-01得票数 0

1回答

如何在jQuery下拉菜单中向父元素添加/删除CSS类

jquery、navigation、drop-down-menu、nav

所有菜单链接:悬停样式。一旦父母点击，子菜单滑下，你悬停，子菜单隐藏回来，确定到目前为止。我想给父级Add/Remove my CSS class一个CSS类(.focus)，当单击它来改变它的背景颜色时，它的“焦点”状态是假的。在jsfiddle中，当您单击Add/Remove my CSS class时，您将看到它的背景颜色在一秒钟内变为红色，这是由于:active CSS样式所致。因此，即使您将鼠标悬停在子

浏览 2提问于2011-11-22得票数 1

回答已采纳

3回答

用于悬停效果的jQuery备忘css

jquery、css、undo、memoization

我想为一个元素创建一个悬停效果，但希望该元素的悬停前CSS与以前一样，当再次悬停时。因此，当再次悬停在元素之外时，我不想无意中覆盖先前的样式。换句话说，这是一种记录元素的css状态并在以后恢复该状态的简单方法。想法？

浏览 3提问于2012-05-06得票数 0

回答已采纳

5回答

如何选择其他(兄弟)元素CSS？

css

Work</a></li></ul> 当我:hover一项时，我想更改另两项的样式我可以使用什么CSS选择器？

浏览 10提问于2015-09-08得票数 2

回答已采纳

1回答

将鼠标悬停在某个元素上时，获取该元素的默认计算CSS样式

javascript、css、hover

我正在尝试建立一个工具，收集任何元素的CSS样式在网页上。正在发生的问题是，您需要将鼠标悬停在元素上才能选择它，但在这样做的同时，它会触发:hover状态。理想情况下，我希望同时收集默认样式和:hover样式，这似乎可以通过向getComputedStyle传递一个伪元素来实现。如果可能的话，我希望这样做的方法是暂时禁用:悬停，然后直接通过getComputedStyle获取默认状态和悬停状态。当鼠标悬停在元素上时，我尝试给元素一个CSS</e

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

8回答

VueJS -v-绑定:样式+悬停

vue.js、vuejs2

我需要使用CSS悬停与VueJS v-绑定:样式指令，但找不到有关它的信息。是否有其他方法可以在鼠标上方绑定样式或使用VueJS在CSS上悬停？d3e0ff', borderColor: '#d3e0f

浏览 6提问于2017-10-03得票数 31

回答已采纳

点击加载更多

css悬停样式