悬停是指将鼠标光标放在给定元素上的操作。悬停还可以指启用触摸的设备上的用户触摸给定元素的事件。
HTML ... HTML <table width="100%"> <tr> <td width="90%"></td> <td><a href="#" id="logout"><strong>Logout</strong></a></td> </tr> </table> CSS @charset "utf-8"; /* CSS Document */ #logout { color:#BBB; } a:hover { color:#FFF; } 虽然注销的颜色似乎是 css 中给出的颜色，但当我将鼠标放在链接上时，颜色不会改变（变为白色）。原因是什么？ 我必须告诉你，还有其他 css 文件，当鼠标放在它们上方时，它们往往会改变链接的颜色，并且它们工作正常。 id 选择器 (#logout) 比类型选择器 (a) 加上伪类 (:hover) 更具体，因此您的第一个规则集将始终赢得级联。 请使用 #logout:hover 来代替。 简化： 您有两个适用于该锚点的 CSS 规则。 两条规则都会改变颜色。 只能适用一条规则；只能选择一种颜色。 浏览器必须在基于 ID 的规则 (#logout) 和基于元素类型的规则 (<a>) 之间进行选择。 在这种情况下，基于 ID 的规则获胜。指定 ID 比指定类型（锚点）的所有元素更具体。 开始吧！只需复制和面食 #logout{ color:#bbb; } #logout :hover{ color: #fff; } <table width="100%"> <tr> <td width="90%"></td> <td><a href="#" id="logout"><strong>Logout</strong></a></td> </tr> </table> 您应该始终使用 Id Selector (#) 而不是类和其他选择器。这将帮助您有效地使用Hover effect!! 您必须遵循层次结构顺序： 链接、悬停、访问过 例如： a:link { text-decoration:none; color:#008b45; } a:hover { margin-bottom: 3px solid #ff7400; background: white; } a:visited { color:#ee9a00; } 你必须先将其设为块或内联块。 像这样： #logout { display: inline-block color:#BBB; } a:hover { color:#FFF; } 退出
我对一种让CSS（无javascript）显示div或您悬停的元素之外的元素感兴趣，如下所示： #除法{ 显示：无； } a：悬停#divid { 显示：块； }...
我目前正在开发一个 HTML 项目，并遇到了超链接样式的问题。尽管定义了悬停效果的样式，但将鼠标悬停在链接上时它们似乎并不适用。这是一个
我有一个带有动画的：悬停效果。 在 :hover 中，动画完全按照我的需要运行。但是当我离开 :hover 时，我也需要动画运行，但以相反的方式运行。我使用 (:not(:hover))
我有一个带有动画的：悬停效果。 在 :hover 中，动画完全按照我的需要运行。但是当我离开 :hover 时，我也需要动画运行，但以相反的方式运行。我使用 (:not(:hover))
如何使用 javascript 删除移动设备上点击时的焦点/悬停状态
我有一个悬停时出现的工具提示。问题是，为了删除移动设备中的焦点/悬停状态，您必须单击 .explanation div 外部。我想让你也可以...
当我将鼠标悬停在 1 个按钮上时，我希望在 WPF 中更改另一个按钮的不透明度
我想将鼠标悬停在 1 个按钮上，然后另一个按钮的不透明度缓慢变化（淡出），在 XAML 代码中使用 WPF (C#) 中的动画。 我想要更改的按钮有 x:Name=”
我需要更改 pickerInput 突出显示悬停选项的背景颜色。 我怎样才能实现它？ 下面是一个最小的例子，我尝试改变样式但我无法得到它
我有一个用 VictoryPie 实现的饼图。我想当鼠标悬停在每个切片上时显示一个标签。 我在 MouseFollowToolTip 组件中放置了一条打印语句。当页面
我有一个按钮，其中包含一个圆圈和一个文本。我想使用普通按钮样式，以便最初没有可见的边框背景，并且在点击时它会适当缩放。当
我正在尝试在文本 (p) HTML 元素上创建悬停效果。我希望文本元素的背景颜色发生变化，并且看起来呈椭圆形。请参阅下面的图片，了解我正在尝试的内容...
在 WWDC 13:00 左右的空间用户界面设计视频中，Apple 对于悬停效果做了以下说明： 当您设计锁定时，请包括一个允许系统
在状态服务主题中存储悬停元素不会在订阅时发出任何数据 - 我做错了什么？
我有一个项目，其中包含日历、悬停指令和有状态的通信服务。我对我在这里所做的工作做了一个更简单的表示： https://stackblitz.com/edit/
首页 &... <div class="menu-bar"> <ul> <li><a href="/Home/index.html"> <i class="fa fa-house"></i>Home</a> </i></li> < ul > </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; </style> 我想从 fa fa-house 的 cdn 图标中删除 :hover 效果。 <div class="menu-bar"> <ul> <li> <i class="fa fa-home"></i> <a href="/Home/index.html"> Home </a> </li> </ul> </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; } .menu-bar ul li i{ pointer-events: none; } </style> <div class="menu-bar"> <ul> <li><i class="fa fa-house"></i><a href="/Home/index.html"> Home</a> </i></li> <ul > 只需从 <i> 标签中取出 <a> 元素（图标）即可。 你可以试试这个：- <div class="menu-bar"> <ul> <li><i class="fa fa-house"><a href="/Home/index.html"> </i>Home</a> </i></li> </ul> </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; } </style>
当我将鼠标悬停在按钮上时，如何使按钮中的内容在 WPF 中移动位置？
当我将鼠标悬停在 WPF (C#) 中的按钮上时，我希望按钮中的文本作为动画向上移动到不同的位置，从按钮的中心到顶部。 我目前有这个 XAML ...
我有一个嵌套列表： 李：悬停{ 背景颜色：浅灰色； } ul li ul li:悬停{ 字体粗细：粗体； } 弗诺德 巴兹... 我有一个嵌套列表： li:hover { background-color: lightgray; } ul li ul li:hover { font-weight: bold; } <ul> <li>fnord <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li> <li>gnarf <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>yolo</li> </ul> </li> </ul> </li> </ul> 问题是，悬停“foo”也会悬停“fnord”及其所有 li 元素。如何仅将鼠标悬停在 li 上？ 嵌套是可变的，理论上可以是无限的。 我已经设置了一个JSFiddle。 当您添加一些内联元素时，可以在没有 JavaScript 的情况下为子项目和父项目提供解决方案，这将触发悬停状态。 li>span:hover { background-color: lightgray; font-weight: bold; } <ul> <li><span>fnord</span> <ul> <li><span>baz</span></li> <li><span>foo</span> <ul> <li><span>baz</span></li> <li><span>foo</span></li> </ul> </li> </ul> </li> </ul> JSFiddle在这里。 我相信仅使用 CSS 所能得到的最接近的结果就是从悬停元素的子元素中删除悬停样式......这对父元素没有帮助。 li:hover { background-color: lightgray; } li:hover { font-weight: bold; } li:hover ul { background-color: white; font-weight: normal; } <ul> <li>fnord <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li> <li>gnarf <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li> </ul> JSFiddle 您找到的重复项上接受的答案是我见过的使用JavaScript执行此操作的最佳方法，使用e.stopPropagation：使用CSS级联悬停效果。不过，您需要比该选择器中的“all lis”更具体： $('li').mouseover(function(e) { e.stopPropagation(); $(this).addClass('currentHover'); }); $('li').mouseout(function() { $(this).removeClass('currentHover'); }); .currentHover { background-color: red; } li.currentHover ul { background-color: white; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="container"> <li>fnord <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li> <li>gnarf <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li> </ul> JSFiddle 那里的答案。 所以你只想直接针对一个li？试试这个： ul li ul li:hover{ background-color: red; } 演示在这里 编辑 我还添加了另一个示例，菜单确实可以继续扩展。 使用此选择器进行悬停 ul ul li:hover {} 它只能使用 foo 来设置元素的样式 现在可以通过使用基于 Chromium 的浏览器的 :has() 和 :not() 伪选择器，使用纯 CSS，无需修改 HTML，但 :has 仅在 Firefox 121 中实现。了解最新支持状态请参阅https://caniuse.com/css-has li:not(:has(li:hover)):hover { background-color: lightgray; } <ul> <li>fnord <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li> <li>gnarf <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>yolo</li> </ul> </li> </ul> </li> </ul>
如何通过键盘选择并打开 VS Code 悬停小部件中的链接？
有没有办法通过键盘选择并打开 VS Code 悬停卡中的链接？
将鼠标悬停在名为 nav-part2 的导航菜单的 div 中编写的文本/超链接上时，悬停会与它重叠。这会导致根本不显示文本。如何停止此操作并获取文本
如何更改按钮悬停时的文本颜色？我不想画一个矩形。 按钮 { 编号：按钮 x：58 ...
我有一个包含 5 列的 HTML 表格，在最后一列中，如果我将鼠标悬停在表格上，3 个图标将出现在单元格的末尾。 我唯一的问题是我不希望这 3 个图标...