hover 相关问题

悬停是指将鼠标光标放在给定元素上的操作。悬停还可以指启用触摸的设备上的用户触摸给定元素的事件。

当我将鼠标悬停在选项卡上时,下拉菜单不会保留,因此我无法导航它 - 反应应用程序

我的导航组件有一个“游戏”选项卡,当您将鼠标悬停在该选项卡上时,会出现一个下拉菜单。但是,当用户将鼠标悬停在下面的游戏选项卡上时,我不知道如何保持下拉菜单打开......

回答 1 投票 0

表格 tr 的问题:悬停边框更改

在 Firefox 91.0.2(64 位)Windows 7 中测试。 任务:对于表 tr:hover,以不同的颜色显示 border-top 和 border-bottom,以便在视觉上突出显示该行。 问题:对于 tr:h...

回答 2 投票 0

a:悬停不起作用

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; } 退出

回答 6 投票 0

仅使用CSS隐藏悬停时的兄弟div

我对一种让CSS(无javascript)显示div或您悬停的元素之外的元素感兴趣,如下所示: #除法{ 显示:无; } a:悬停#divid { 显示:块; }...

回答 3 投票 0

超链接样式问题 - 悬停效果不适用

我目前正在开发一个 HTML 项目,并遇到了超链接样式的问题。尽管定义了悬停效果的样式,但将鼠标悬停在链接上时它们似乎并不适用。这是一个

回答 2 投票 0

:悬停在 Sass 中并且动画反转

我有一个带有动画的:悬停效果。 在 :hover 中,动画完全按照我的需要运行。但是当我离开 :hover 时,我也需要动画运行,但以相反的方式运行。我使用 (:not(:hover))

回答 1 投票 0

:在CSS中悬停和动画反转

我有一个带有动画的:悬停效果。 在 :hover 中,动画完全按照我的需要运行。但是当我离开 :hover 时,我也需要动画运行,但以相反的方式运行。我使用 (:not(:hover))

回答 1 投票 0

如何使用 javascript 删除移动设备上点击时的焦点/悬停状态

我有一个悬停时出现的工具提示。问题是,为了删除移动设备中的焦点/悬停状态,您必须单击 .explanation div 外部。我想让你也可以...

回答 1 投票 0

当我将鼠标悬停在 1 个按钮上时,我希望在 WPF 中更改另一个按钮的不透明度

我想将鼠标悬停在 1 个按钮上,然后另一个按钮的不透明度缓慢变化(淡出),在 XAML 代码中使用 WPF (C#) 中的动画。 我想要更改的按钮有 x:Name=”

回答 1 投票 0

如何更改pickerInput中悬停背景颜色?

我需要更改 pickerInput 突出显示悬停选项的背景颜色。 我怎样才能实现它? 下面是一个最小的例子,我尝试改变样式但我无法得到它

回答 1 投票 0

React 组件被调用但未正确渲染

我有一个用 VictoryPie 实现的饼图。我想当鼠标悬停在每个切片上时显示一个标签。 我在 MouseFollowToolTip 组件中放置了一条打印语句。当页面

回答 1 投票 0

使用普通按钮样式时如何将悬停效果限制到按钮内的特定视图

我有一个按钮,其中包含一个圆圈和一个文本。我想使用普通按钮样式,以便最初没有可见的边框背景,并且在点击时它会适当缩放。当

回答 0 投票 0

如何创建改变背景颜色并看起来圆润的悬停效果

我正在尝试在文本 (p) HTML 元素上创建悬停效果。我希望文本元素的背景颜色发生变化,并且看起来呈椭圆形。请参阅下面的图片,了解我正在尝试的内容...

回答 1 投票 0

如何在visionOS中自定义悬停效果区域

在 WWDC 13:00 左右的空间用户界面设计视频中,Apple 对于悬停效果做了以下说明: 当您设计锁定时,请包括一个允许系统

回答 1 投票 0

在状态服务主题中存储悬停元素不会在订阅时发出任何数据 - 我做错了什么?

我有一个项目,其中包含日历、悬停指令和有状态的通信服务。我对我在这里所做的工作做了一个更简单的表示: https://stackblitz.com/edit/

回答 1 投票 0

如何去除特定元素的 :hover 效果?

首页 &... <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>

回答 3 投票 0

当我将鼠标悬停在按钮上时,如何使按钮中的内容在 WPF 中移动位置?

当我将鼠标悬停在 WPF (C#) 中的按钮上时,我希望按钮中的文本作为动画向上移动到不同的位置,从按钮的中心到顶部。 我目前有这个 XAML ...

回答 1 投票 0

如何仅悬停嵌套ul中的当前li?

我有一个嵌套列表: 李:悬停{ 背景颜色:浅灰色; } 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>

回答 5 投票 0

如何通过键盘选择并打开 VS Code 悬停小部件中的链接?

有没有办法通过键盘选择并打开 VS Code 悬停卡中的链接?

回答 1 投票 0

如何停止在 CSS 中编写的文本/超链接上重叠悬停颜色?

将鼠标悬停在名为 nav-part2 的导航菜单的 div 中编写的文本/超链接上时,悬停会与它重叠。这会导致根本不显示文本。如何停止此操作并获取文本

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.