hover 相关问题

如何仅悬停嵌套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>

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

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

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

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

当按钮悬停在 Qt6 中时更改 QML 按钮的文本颜色？

如何更改按钮悬停时的文本颜色？我不想画一个矩形。 按钮 { 编号：按钮 x：58 ...

如何使图标在 html 表格行中可见？

我有一个包含 5 列的 HTML 表格，在最后一列中，如果我将鼠标悬停在表格上，3 个图标将出现在单元格的末尾。 我唯一的问题是我不希望这 3 个图标...

复选框仅在悬停或选中时可见

'要求是 onhover 复选框必须可见，但 onmouseout 选中的复选框必须可见，未选中的复选框必须不可见。我的问题是复选框悬停功能单独工作，但 ch...

CSS 悬停不起作用（由于伪元素）？

我正在摆弄 SVG 和 CSS 效果，以实现类似于游戏“limbo”的外观。 这就是我的标记的样子（https://codepen.io/Richard-Hahn/pen/VwRwwjm）： 我正在摆弄 SVG 和 CSS 效果，以实现类似于游戏“limbo”的外观。 这就是我的标记的样子（https://codepen.io/Richard-Hahn/pen/VwRwwjm）： <div class="tiltshift"> <div class="grain"> <svg>...</svg> </div> </div> .grain{ display:flex; justify-content:center; align-items:center; width:100%; height:auto; background-position:center } .grain:after{ content:""; background-image:url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png"); height: 300%; width: 300%; position: fixed; opacity:0.1; animation: animateGrain 8s steps(10) infinite; } @keyframes animateGrain{ 0%, 100% { transform:translate(0, 0) } 10%{ transform:translate(-5%,-10%) } 20%{ transform:translate(-15%,-20%) } 30%{ transform:translate(-5%,-10%) } 40%{ transform:translate(-15%,-20%) } 50%{ transform:translate(-5%,-10%) } 60%{ transform:translate(-15%,-20%) } 70%{ transform:translate(-5%,-10%) } 80%{ transform:translate(-15%,-20%) } 90%{ transform:translate(-5%,-10%) } 100%{ transform:translate(-15%,-20%) } } .tiltshift:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; backdrop-filter: blur(26px); animation: clip-fade 12s infinite alternate; } .tiltshift { border:1px solid red; } @keyframes clip-fade { 0% { mask-image: linear-gradient(204deg, rgba(0, 0, 0, 1), transparent 100%); } 100% { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent 100%); } } #rect1 { fill:red !important; } #rect1:hover { transform:scale(1.07) !important; } 颗粒和倾斜效果按预期工作，但我无法再触发 svg-elements 上的悬停行为。我做错了什么？ 使用 Firefox 检查器，当我选择元素时，我可以触发悬停。所以我怀疑是伪元素阻止了 svg-elements 上的悬停。 你的直觉是对的，伪元素正在干扰悬停事件。事实上，由于它们占据了所有的屏幕空间，因此它们是在 rect 元素之前“捕获”悬停事件的对象。 您可以通过向伪元素添加 pointer-events: none 规则来解决此问题。这样，它们就不会再捕获悬停，并且矩形现在可以自由地受到它的影响。 参见 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

即使点击页面上的空白区域，如何保持按钮“悬停”？

我有一组使用锚标记充当“选项卡”的按钮。选项卡的功能运行顺利，按钮保持悬停状态，直到我单击另一个按钮。但是，所有按钮都无法悬停...

我们可以使用flutter在移动设备上使用悬停效果吗？

我需要使用 flutter 在我的图标中实现悬停效果，但我希望在我的手机上实现此悬停效果

将反应三纤维悬停在脸上

我仍然是整个 Three.js 生态系统的菜鸟，所以即使我找到非常接近解决方案的东西，我也会遇到困难。例如，我终于找到了解决方案

如何使用chrome web Inspector查看hover代码

使用chromes web Inspector查看代码非常有用。但是，您如何查看按钮的悬停代码？您必须将鼠标悬停在按钮上，因此无法使用它（鼠标）...

悬停在其边界之外触发。 HTML 和 CSS

所以我目前正在 HTML 中制作降临节日历，目前预计我的悬停会出现问题。即使我没有在盒子内悬停，也会触发悬停。这是一个展示它的视频

Plotly R 中悬停值的固定位置

是否可以将迹线值放置在绘图角落中悬停时显示的 Plotly/R（仅限 y 值）中，或者放置在绘图上的固定位置，例如如红色突出显示。 x <- c(1:100) random...

您可以更改 Microsoft Edge 中 :hover 上选择选项的背景颜色吗？

我一直在尝试更改鼠标悬停时选择下拉列表的选项元素的背景颜色，但无法使其在 Microsoft Edge 中工作，悬停始终显示为灰色...

悬停时更改标签和输入元素的字体大小 - 使用 CSS 的 HTML

HTML： XXX 照片 HTML: <fieldset> <legend> XXX </legend> <label for="photo"> Photo </label> <input type="file" name="photo" id="photo"> <br> <label for="imagePreview"> Preview: </label> <img id="preview"> </fieldset> CSS: // 1. In this order, only input:hover works. label:hover { font-size: 25px;} input:hover { font-size: 20px;} // 2. In this order, only label:hover works. input:hover { font-size: 20px;} label:hover { font-size: 25px;} 我被要求做这两件事都应该调整它们的字体大小。 例如：将鼠标悬停在标签上，应该更改其字体大小。 将鼠标悬停在输入上，也应该更改其字体大小。 为什么不同时改变字体大小呢？ 我怎样才能实现它？ fieldset { font-size: 20px;} label:hover , input:hover { font-size: 25px;} <fieldset> <legend> XXX </legend> <label for="photo"> Photo </label> <input type="file" name="photo" id="photo"> <br> <label for="imagePreview"> Preview: </label> <img id="preview"> </fieldset> 你的意思是这样的 fieldset { font-size: 20px;} fieldset:hover label,fieldset:hover input { font-size: 25px;} <fieldset> <legend> XXX </legend> <label for="photo"> Photo </label> <input type="file" name="photo" id="photo"> <br> <label for="imagePreview"> Preview: </label> <img id="preview"> </fieldset> 如何在悬停时改变字体大小，而不改变背景大小？

css 将鼠标悬停在一个 div 上，另一个 div 会更改不透明度

我正在尝试在我的 WordPress 网站中使用 CSS 来更改相邻 div 列悬停时的 div 列的不透明度。 这是我正在使用的 CSS，但它不起作用。我想悬停在狗宝上...

如何通过将鼠标悬停在锚标记内来更改 fontawesome 图标的颜色？

我在导航栏中遇到问题，在里面我放置了简历链接和图标来下载简历，如果我将鼠标悬停在简历上，那么只有简历获取颜色图标不会改变它的颜色，但是......

如何在悬停时放大 div 并缩小所有其他 div

我一直在试图解决这个问题，但没有成功。 下面是 6 个圆形 div。当用户将鼠标悬停在其中一个上时，我希望悬停的 div 扩大一点（放大），而所有其他...

“创建精美的悬停效果：寻求按钮/链接 CSS 过渡的指导”

实现平滑 CSS 过渡或动画以实现按钮或链接上的悬停效果的最佳方法是什么？需要确保完美的用户体验。谁能提供代码示例和...

为图片链接添加一个：hover box-shadow

我正在尝试添加一个框阴影 a:hover 到 Facebook 图标图像。 我认为这很容易，但像往常一样我错了。 我在 WordPress 中使用了一个儿童主题，因为我只开始了几个星期一......