hover 相关问题

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

'要求是 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 中使用了一个儿童主题，因为我只开始了几个星期一......

Three.js中如何实现球体悬停效果，鼠标悬停时变色？

如何实现悬停变色效果？ 如何实现颜色变化的悬停效果？ 如何实现颜色变化的悬停效果？ 你好社区， 我已经成功实施了 f...

启动屏幕标题上的悬停属性会导致标题向上平移吗？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QuiZA</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="container"> <h1 class="frontlogo">QuiZA Logo </h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ducimus libero culpa ipsum cupiditate quasi accusantium quibusdam soluta, dolorem iure sapiente ut consectetur cum minus id repellat amet perspiciatis fuga?</p> <!--Loading screen will start after this--> <div class="splash"> <h1 class="splash-header">Press Here...</h1> </div> </div> </body> </html> .container{ background: darkgoldenrod; height: 100vh; width: 100%; display: grid; } .splash{ cursor: none; background: black; height: 100%; width: 100%; top: 50%; right: 50%; transform: translateY(-300px); transition: all ease-in-out 600ms; } .hidden{ transition: 2.0s; display: none; } .splash-header{ height: 90%; color: white; display: flex; justify-content: center; align-content: center; vertical-align: center; transform: translateY(30%); } .splash-header:hover{ transform: scale(1.5); } .frontlogo{ height: 90%; color: white; display: flex; justify-content: center; align-content: center; } 我目前正在开发一个测验应用程序，用于使用 HTML 研究我的本科作业； CSS；和JS。我正在尝试编写一个启动启动屏幕，按下时该屏幕会消失。我在尝试在启动屏幕标题上实现的悬停属性时遇到问题。语句 transform: scale(1.5); 使文本跳转到启动容器的顶部。我希望它保持在同一个位置，但只是变得更大，并且我希望悬停是一个平滑的动画，而不是静态的（如果有意义的话）。 我尝试使用启动标题的 Hover 类中的align-items、固定定位（顶部、左侧）和transform:translateY 来更改标题的位置。这些都没有达到我想要的结果。 JSFiddle 首次尝试使用以前从未使用过的小提琴。 我看到您遇到的两个主要问题是： 您的 Flexbox 样式位于 H1 样式内部，而不是 H1 容器内部。 Flexbox 样式会影响容器以及容器应如何与其内部的项目交互，而不是单独影响每个项目（从广泛的角度来看） 您正在使用转换样式，该样式在触发时会抛出转换。相反，我使用边距将飞溅放在正确的位置，这解决了您的标题问题。 .container{ background: darkgoldenrod; height: 100vh; width: 100%; display: grid; } .splash{ cursor: none; background: black; height: 100%; width: 100%; top: 50%; right: 50%; margin-top: -300px; margin-bottom: 300px; display: flex; justify-content: center; align-items: center; } .hidden{ transition: 2.0s; display: none; } .splash-header{ color: white; transition: all ease-in-out 0.6s; } .splash-header:hover{ transform: scale(1.5); } .frontlogo{ height: 90%; color: white; display: flex; justify-content: center; align-content: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QuiZA</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="container"> <h1 class="frontlogo">QuiZA Logo </h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ducimus libero culpa ipsum cupiditate quasi accusantium quibusdam soluta, dolorem iure sapiente ut consectetur cum minus id repellat amet perspiciatis fuga?</p> <!--Loading screen will start after this--> <div class="splash"> <h1 class="splash-header">Press Here...</h1> </div> </div> </body> </html>

创建 CSS 动画以实现悬停在元素上的平滑过渡效果？

创建 CSS 动画以在元素上悬停时实现平滑过渡效果，这意味着在元素上悬停时过渡应该出现。 我无法在

悬停效果不影响链式 Div

该问题由一个 div .hoverbox 与悬停样式链接到另一个 div .menubox 组成。 但是当我将鼠标悬停在 .hoverbox 上时，.menubox 没有任何反应。 这是我的代码： 身体 { 显示：f...

vscode golang 徘徊在一个项目而不是另一个项目中工作

我最近开始使用 vscode 进行 golang 开发。我使用示例代码 随附一本书作为起点。这是分章节的，我对第 2 章和第 3 章中的代码做了一些工作。W...