悬停是指将鼠标光标放在给定元素上的操作。悬停还可以指启用触摸的设备上的用户触摸给定元素的事件。
我开始了一个约会应用程序项目。我使用 dotnet 并创建了包含许多文件的项目。我在 VS Code 中安装了一些扩展：C# 和 C# 扩展。 我的问题是，当我将鼠标悬停在鳕鱼的元素上时......
我有一个 div，里面有文本和图像。我希望当我将鼠标悬停在 div 内的任何位置时，div 内的所有文本和背景都会改变颜色。我已经做到了，所以底部的文字...
径向渐变应该在悬停时从 10% 增长到 100%，但它只是没有做任何事情。无法理解我做错了什么。 径向渐变应该在悬停时从 10% 增长到 100%，但它只是没有做任何事情。无法理解我做错了什么。 <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"> <style><![CDATA[ #svgDoc { pointer-events: all } #svgDoc:hover #svgGrad { animation: svgGrad_f_p 3000ms linear 1 normal forwards } @keyframes svgGrad_f_p { 0% { offset: 10% } 100% { offset: 100% } } ]]> </style> <defs> <radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"> <stop id="svgGrad-fill-0" offset="0%" stop-color="#ff0000"/> <stop id="svgGrad-fill-1" offset="10%" stop-color="#000"/> </radialGradient> </defs> <rect id="svgGrad" width="500" height="500" rx="0" ry="0" fill="url(#svgGrad-fill)"/> </svg> 要在 SVG 中对径向渐变进行动画处理，您需要确保动画属性与 CSS 动画兼容。在 SVG 中，您无法使用 CSS 直接对渐变停止点的偏移属性进行动画处理。相反，您需要使用 SMIL（同步多媒体集成语言）来动画 $VG 属性。 以下是如何修改 SVG 以使用 SMIL 制作径向渐变动画： <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"> 您无法通过 CSS 操作 stop 属性，因为它与同名的 CSS offset-path 相关属性发生“冲突”。 解决方法 1：由 begin 属性触发的 SMIL 动画 一种解决方法可能是通过 SMIL 动画对渐变进行动画处理，如下所示： <h3>Hover me</h3> <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <defs> <radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"> <stop id="svgGrad-fill-0" offset="0%" stop-color="#ff0000" /> <stop id="svgGrad-fill-1" offset="10%" stop-color="#000" > <animate attributeName="offset" fill="freeze" values="0.1;1" dur="1s" repeatCount="1" begin="svgGrad.mouseover" /> <animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout" /> </stop> </radialGradient> </defs> <rect id="svgGrad" width="500" height="500" rx="0" ry="0" fill="url(#svgGrad-fill)" /> </svg> 幸运的是，SVG 的 <animate> 元素允许您 添加事件以开始（或停止）播放。请参阅 “mdn 文档：开始” <animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout" /> 解决方法 2：CSS 自定义 @property 通过定义开始和结束偏移的自定义属性，我们还可以实现平滑的渐变过渡。 @property --offset1 { syntax: "<percentage>"; inherits: false; initial-value: 0%; } @property --offset2 { syntax: "<percentage>"; inherits: false; initial-value: 10%; } .gradient{ background: radial-gradient( #FF0000 var(--offset1), #000 var(--offset2)); transition:1s --offset1, 1s --offset2; } .gradient:hover{ --offset1: 5%; --offset2:100%; } <h3>Gradient CSS</h3> <svg id="svgDoc2" class="gradient" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> </svg> 这不适用于 CSS 变量，因为我们无法转换 background 属性本身。 在这种方法中，我们将 CSS 渐变应用于最外层（父）SVG 元素 - 就像 HTML 元素一样接受 CSS 渐变样式（与内部 SVG 元素不同）。 但是，SMIL 方法可能仍然提供最佳的跨浏览器兼容性。 另请参阅： “mdn 文档：@property” “css-tricks：使用 @property 进行 CSS 自定义属性” Temani Afif 的回答：“如何使用 CSS 制作径向渐变动画？”
有人可以告诉我为什么我的径向渐变 SVG 悬停时没有动画吗？
径向渐变应该在悬停时从 10% 增长到 100%，但它只是没有做任何事情。无法理解我做错了什么。 径向渐变应该在悬停时从 10% 增长到 100%，但它只是没有做任何事情。无法理解我做错了什么。 <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"> <style><![CDATA[ #svgDoc { pointer-events: all } #svgDoc:hover #svgGrad { animation: svgGrad_f_p 3000ms linear 1 normal forwards } @keyframes svgGrad_f_p { 0% { offset: 10% } 100% { offset: 100% } } ]]> </style> <defs> <radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"> <stop id="svgGrad-fill-0" offset="0%" stop-color="#ff0000"/> <stop id="svgGrad-fill-1" offset="10%" stop-color="#000"/> </radialGradient> </defs> <rect id="svgGrad" width="500" height="500" rx="0" ry="0" fill="url(#svgGrad-fill)"/> </svg> 您无法通过 CSS 操作 stop 属性，因为它与同名的 CSS offset-path 相关属性发生“冲突”。 一种解决方法可能是通过 SMIL 动画对渐变进行动画处理，如下所示： <h3>Hover me</h3> <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <defs> <radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"> <stop id="svgGrad-fill-0" offset="0%" stop-color="#ff0000" /> <stop id="svgGrad-fill-1" offset="10%" stop-color="#000" > <animate attributeName="offset" fill="freeze" values="0.1;1" dur="1s" repeatCount="1" begin="svgGrad.mouseover" /> <animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout" /> </stop> </radialGradient> </defs> <rect id="svgGrad" width="500" height="500" rx="0" ry="0" fill="url(#svgGrad-fill)" /> </svg> 幸运的是，SVG 的 <animate> 元素允许您 添加事件以开始（或停止）播放。请参阅 “mdn 文档：开始” <animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout" />
我正在使用 QScrollBar 小部件。 当我的鼠标悬停在小部件上时，它会变成全尺寸。 当我将鼠标移开时，它几乎隐藏起来。 我希望小部件始终保持完整尺寸。 做...
我想创建一个迷你项目来测试我的 CSS 技能，所以我决定创建一个下拉菜单。 所以我开始编写 HTML 代码： 超文本标记语言 我想创建一个迷你项目来测试我的 CSS 技能，所以我决定创建一个下拉菜单。 所以我开始编写 HTML 代码： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hover menu</title> <link rel="stylesheet" href="CSS/style.css" /> </head> <body> <div class="wrapper"> <div> <button class="btn"> User Profile <img class="chevron" src="image/chevron.svg" alt="" /> </button> <div class="drop-down"> <ul> <li>Basket</li> <li>Edit</li> <li>Courses</li> <li>Logout</li> </ul> </div> </div> </div> </body> </html> 然后我写了CSS代码，我认为这是有问题的部分，但我检查了几个小时都找不到它 CSS @font-face { font-family: "Poppins"; src: local("Poppins"), url(../font/Poppins-Regular.ttf) format(truetype); } html { box-sizing: border-box; } * { list-style: none; margin: 0px; padding: 0px; } *, *::after, *::before { box-sizing: inherit; } body { font-family: "Poppins"; } .wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .btn { position: relative; color: #fff; background-color: #1565c0; border: none; border-radius: 5px; font-size: 20px; padding: 10px; cursor: pointer; transition: all 400ms; } .chevron { width: 20px; vertical-align: middle; transition: all 300ms linear; } .drop-down { position: absolute; text-align: center; border-radius: 5px; box-shadow: 1px 1px 10px 0px gray; visibility: hidden; opacity: 0; transition: all 400ms ease-out; } .drop-down ul li { width: 150px; border-radius: 2px; padding: 5px; transition: all 200ms linear 100ms; cursor: pointer; } /* Actions */ .btn:hover { background-color: #0d47a1; } .btn:hover .chevron { transform: rotate(180deg); } .btn:hover + .drop-down, .drop-down:hover { transform: translate(0px, 10px); visibility: visible; opacity: 1; } > Looks like hover is not working here!!!! .btn:hover .chevron, .drop-down:hover .chevron { transform: rotate(180deg); } .drop-down ul li:hover { color: #fff; background-color: #1565c0; } 我预计在悬停按钮然后悬停下拉列表后，悬停按钮时旋转的 V 形会保持其旋转，请帮忙。 如果您将鼠标悬停在按钮上，他们将光标移动到下拉菜单您将不再悬停在按钮上。 移动下拉 div 内的按钮 ，并调整 CSS 以隐藏/显示悬停时的 ul。 html { box-sizing: border-box; } * { list-style: none; margin: 0px; padding: 0px; } *, *::after, *::before { box-sizing: inherit; } body { font-family: "Poppins"; } .wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .btn { position: relative; color: #fff; background-color: #1565c0; border: none; border-radius: 5px; font-size: 20px; padding: 10px; cursor: pointer; transition: all 400ms; } .chevron { width: 20px; vertical-align: middle; transition: all 300ms linear; filter: invert(100%) } .drop-down { position: relative; } .drop-down ul { position: absolute; visibility: hidden; opacity: 0; text-align: center; border-radius: 5px; box-shadow: 1px 1px 10px 0px gray; transition: all 400ms ease-out; } .drop-down ul li { width: 150px; border-radius: 2px; padding: 5px; transition: all 200ms linear 100ms; cursor: pointer; } /* Actions */ .btn:hover { background-color: #0d47a1; } .btn:hover .chevron { transform: rotate(180deg); } .btn:hover+.drop-down ul, .drop-down:hover ul { transform: translate(0px, 10px); visibility: visible; opacity: 1; } .btn:hover .chevron, .drop-down:hover .chevron { transform: rotate(90deg); } .drop-down ul li:hover { color: #fff; background-color: #1565c0; }<div class="wrapper"> <div class="drop-down"> <button class="btn"> User Profile <img class="chevron" src="https://icons.iconarchive.com/icons/fa-team/fontawesome/256/FontAwesome-Chevron-Right-icon.png" alt="" /> </button> <ul> <li>Basket</li> <li>Edit</li> <li>Courses</li> <li>Logout</li> </ul> </div> </div>
我正在尝试在 Next.js 上设置带有 tailwind 的按钮样式。 我希望按钮背景颜色在悬停时改变。 我正在尝试设计一个按钮来做这样的事情 我正在尝试在 Next.js 上设置带有 tailwind 的按钮样式。 我希望按钮背景颜色在悬停时改变。 我正在尝试设计一个按钮来做这样的事情 <button className="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:bg-slate-200"> Hire Me </button> 但是悬停并不会改变背景颜色。 由于渐变颜色默认设置背景，为了解决此问题，您可以使用相同的渐变，但在悬停时使用所需的颜色，如下所示： <button className="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:from-slate-200 hover:via-slate-200 hover:to-slate-200"> 雇用我 当然！这是您的解释的英文翻译： 由于渐变颜色默认设置背景，为了解决此问题，您可以使用相同的渐变，但在悬停时使用所需的颜色，如下所示： <button className="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:from-slate-200 hover:via-slate-200 hover:to-slate-200"> Hire Me </button> 这应该可以解决问题并确保渐变背景在悬停时正确变化。
我有这个代码： &l... 我有这个代码： <div class="ver-thin"> <div class="img-div" style="background-image: url('https://preludica.com/img/featured.webp');"></div> <span> <h4>Item title</h4> <p class="text">Item description.</p> </span> </div> 我只是希望这个 background-image 在悬停时放大，同时使用 CSS 在其父级 ver-thin 内。 你能帮我吗？ 已经尝试过background-size但没有成功。我对高级 CSS 不太了解，所以每个帮助都有帮助！ :) 这里是您的代码的最小复制。由于没有提供 css，所以我只是假设它，这仅用于演示目的。 该要求可以通过background-size实现。不过，悬停时触发它可能会很棘手。拥有背景图像的更好方法是将其放入 ver-thin css 类中，而不是渲染单独的 div 来包含背景图像。但由于没有其他代码，所以我认为这对于您的用例是必要的。无论如何，这是我所做的事情的分解： 我将位置 relative 应用于父级 div，即 ver-then。这是因为，我们希望在子 div 内渲染背景图像。 我将位置 absolute 应用于 img-div，以便它可以相对于其父 div 自由定位。我将其初始background-size设置为100%，但您可以根据您的要求更改它。 然后，我编写了一个 css 选择器来更改 img-div 的样式，每当用户 hover 位于 ver-then div 上时。在该选择器中，我将 background-size 的 img-div 增加到 150%。 您可以根据自己的需求更改size并重构代码。 有一件事是，目前 background 或 background-size 更改无法使用正常的 transition 规则进行转换。要制作平滑的效果，您需要编写自己的 key-frame 动画，您可以在代码笔上找到该动画。因此，在我的代码中，transition: all backgorund-size 0.8s ease;行对背景大小变化没有任何影响。 .ver-thin{ position: relative; width: 400px; height: 400px; padding: 20px; border: 1px solid black; border-radius: 8px; } .img-div{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-size: 100%; background-position: center; transition: all backgorund-size 0.8s ease; z-index: -1; } .ver-thin:hover .img-div{ background-size: 150%; } <div class="ver-thin"> <div class="img-div" style="background-image: url('https://preludica.com/img/featured.webp');"></div> <span> <h4>Item title</h4> <p class="text">Item description.</p> </span> </div>
我正在尝试使每个导航栏按钮的 on ohver 效果突出显示导航栏的整个宽度。目前它只是将其包裹在突出显示中，就好像它只是突出显示按钮
如何检测 GestureDetector 是否悬停在 Flutter 中？
所以我在 Flutter 中有一个小部件 GestureDetector，我希望它在“悬停”时执行某些操作，如下所示（向任何方向拖动）： 可以用 GestureDetector 来实现吗？任何帮助appre...
react-bootstrap 当鼠标光标位于工具提示内时防止工具提示隐藏
我使用react-bootstrap的和在用户将鼠标悬停在禁用按钮上时显示带有链接的工具提示，如下所示： 我使用 react-bootstrap 的 <OverlayTrigger> 和 <Tooltip> 当用户将鼠标悬停在禁用按钮上时显示带有链接的工具提示，如下所示： <OverlayTrigger placement="bottom" delay={{ hide: 500 }} overlay={<Tooltip> Click <a href="/billing">here</a> </Tooltip>} > <Button disabled>I am a button</Button> </OverlayTrigger> 但是用户永远无法单击该链接，因为当光标离开按钮时，工具提示会自动隐藏。我可以延迟隐藏更长时间，但如果用户的光标位于工具提示内，则无法阻止它隐藏 - 有谁知道如何实现这一点？ 我不认为React-Bootstrap's OverlayTrigger提供了一种内置方法来处理这种情况，即当用户的光标位于工具提示内时工具提示保持可见 因此您可以使用 Overlay 组件并手动管理 toolip's 可见性状态。 使用下面随机复制的代码进行集成。 import React, { useState, useRef } from 'react'; import { Button, Overlay, Tooltip } from 'react-bootstrap'; const CustomTooltipButton = () => { const [show, setShow] = useState(false); const target = useRef(null); const handleMouseEnter = () => setShow(true); const handleMouseLeave = (e) => { if (!target.current.contains(e.relatedTarget)) { setShow(false); } }; return ( <> <Button ref={target} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} disabled > I am a button </Button> <Overlay target={target.current} show={show} placement="bottom"> {(props) => ( <Tooltip {...props} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > Click <a href="/billing">here</a> </Tooltip> )} </Overlay> </> ); }; export default CustomTooltipButton;
当鼠标悬停在 img 上时，所有其他图像都会使用 CSS 进行模糊处理：not(:hover)
我正在尝试弄清楚如何在一张图像悬停时对所有其他图像应用模糊效果： img:not(:悬停) { 滤镜：模糊（3px）； -webkit-transition：400ms 缓和 100ms； -莫兹-特兰...
我想知道是否有人可以帮助我。 我在剧作家中使用悬停，但我需要将鼠标悬停在指定元素上并等待 4 秒 我浏览了文档 https://playwright.dev/do...
我希望能够选择并复制图表中的悬停文本。 R API 可以做到这一点吗？ 例如，在此热图中，将鼠标悬停在坐标 (X=a, Y=d) 上时，可以看到...
我在 img Hover 上遇到闪烁问题。 我想在 img 悬停时将所有 img 显示为从 6 到 3 的网格。为此，我使用事件处理程序和状态。但是，因为使用了事件函数，所以...
在具有触摸屏的设备（如平板电脑和智能手机）上，CSS 悬停是什么？ 我试图在我的轮播上显示箭头，对于桌面，我知道我可以使用悬停，但是什么......
我遇到了问题。当我将鼠标悬停在图像上时，会出现黑色叠加层，但 CSS Transition 属性不起作用。 这是 HTML： 我遇到了问题。当我将鼠标悬停在图像上时，会出现黑色叠加层，但 CSS Transition 属性不起作用。 这是 html： <div class="col-md-12"> <div class="collection-category"> <img src="http://dummyimage.com/600x400/#C1C1C1/fff" /> <a href="#"> <div class="overlay_wrap"> <div class="overlay"> <h2 class="collection_title">Headline One</h2> </div> </div> </a> </div> </div> CSS 是： .collection-category { display: block; overflow: hidden; margin: 10px 0; position: relative; } .collection-category img { width: 100%; max-height: 250px; } .collection_title { display: table-cell; vertical-align: middle; font-size: 28px; } .overlay_wrap { position: absolute; top: 0; bottom: 0; left: 0; right: 0; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .overlay { display: none; background: rgba(2, 2, 2, 0.61); color: #FFF; text-align: center; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .collection-category:hover>a>.overlay_wrap>.overlay { display: table; height: 100%; width: 100%; } 这是 JSFiddle http://jsfiddle.net/cnbvoe32/ 任何帮助将不胜感激。 提前致谢。 这是因为你无法从display: none过渡到display: table。 相反，您可以通过将初始显示设置为 opacity 以及 table 然后转换为 opacity: 0 来转换 opacity: 1 属性： 更新示例 .overlay { display: table; background: rgba(2, 2, 2, 0.61); color: #FFF; text-align: center; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; opacity: 0; height: 100%; width: 100%; } .collection-category:hover>a>.overlay_wrap>.overlay { opacity: 1; } 只是路过，因为我正在寻找相同的解决方案。 我不知道你是否还在乔什身边，但非常感谢！ Chat GPT 没有注意到我将显示设置为表格。我所有减缓过渡的尝试都是徒劳的。我不知道该表不会受到转换的影响。
我正在尝试实现悬停事件，但 onMouseLeave 在离开元素时并不总是触发，特别是在快速将光标移动到元素上时。我尝试了 Chrome、Firefox 和 Internet Explorer...
我正在为学校做最后一个项目，我正在尝试编写一段文本（在本例中为 d0），当我将鼠标悬停在门上时，它会出现，这是一个图像类。 身体 { 背景-c...