hover 相关问题

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

他们之前正在工作，但我试图添加基于反应的页面链接，这似乎破坏了悬停效果，现在我无法让它们再次正常运行。他们做的是正确的...

javascript html css animation hover

回答 1 投票 0

我需要一个 :hover 元素，当鼠标悬停在该元素上时，会导致背景颜色在五种颜色之间变化。这是我现在正在使用的代码。我需要一个 :hover 元素，当鼠标悬停在该元素上时，会导致背景颜色在五种颜色之间变化。这是我现在正在使用的代码。 <div class="background_changer"> </div> .background_changer :hover { } 我知道这没什么好说的，但是帮助我调整一下就太好了。您需要将 animation 属性添加到 .background_changer:hover 选择器，如下所示：- 下面的代码将背景颜色更改为 5 种不同的颜色，但您也可以通过简单地将百分比均匀分布在 @keyframes 内来将其更改为更多或更少的颜色。 .background_changer{ height:100px; width:100px; background-color: black; cursor:pointer; } .background_changer:hover{ animation: glow linear 2s infinite; } @-webkit-keyframes glow { 0% { background-color:red; } 25% { background-color:orange; } 50% { background-color:green; } 75% { background-color:blue; } 100% { background-color:indigo; } } @keyframes glow { 0% { background-color:red; } 25% { background-color:orange; } 50% { background-color:green; } 75% { background-color:blue; } 100% { background-color:indigo; } } <div class="background_changer"> </div> 您正在寻找的是@keyframes下面的代码应该可以实现您想要的。 .bgchange { width: 300px; height: 300px; background: red; } .bgchange:hover { animation: anim 5s infinite; } @keyframes anim { 0% { background: red;} 20% { background: blue;} 40% { background: green;} 60% { background: orange;} 80% { background: yellow;} 100%{ background: pink;} } } <div class="bgchange"></div> 一种方法是使用 CSS 动画/关键帧。在这种情况下，关键帧被命名为 Change_Colour。然后该动画在类的 hover 状态下切换。按下面的运行代码片段按钮查看结果： .background_changer{ height: 5rem; width: 5rem; background-color: red; } .background_changer:hover{ animation: Change_Colour 1s infinite; } @keyframes Change_Colour { 0% {background-color: red;} 20% {background-color: orange;} 40% {background-color: yellow;} 60% {background-color: green;} 80% {background-color: blue;} 100% {background-color: red;} } <div class="background_changer"></div> 这是一个没有关键帧的想法： .background_changer{ height: 5rem; aspect-ratio: 1; background: linear-gradient(90deg, red 0 20%, blue 0 40%, green 0 60%, yellow 0 80%, purple 0) left/500% 100%; transition: 1s steps(5,jump-none); } .background_changer:hover{ background-position: right; } <div class="background_changer"></div>

html css animation hover

回答 4 投票 0

指针事件+悬停CSS上的不透明度

我正在构建一个网站，其中一个单独的 div 位于另一个 div 之上。当您将鼠标悬停在顶部 div 上时，我希望它在您将鼠标悬停在其上时消失，并且您应该能够单击它。我一开始以为...

html css hover opacity pointer-events

回答 4 投票 0

（Vaadin 地图）当用户将鼠标悬停在功能标记上时更改光标

我目前正在使用 Vaadin 地图组件来可视化船只在海上的轨迹。我想突出轨迹之间的一些协调点，以便他/她可以检查更多

dictionary hover cursor vaadin

回答 2 投票 0

当鼠标悬停在按钮上时是否可以同时更改底层div的css属性？

在我的html页面中，我有一个按钮，里面有两个div。上面的 div 包含菜单图标 svg，下面的 div 包含按钮文本。 div 强制用于将图标和文本放置在

html css button filter hover

回答 1 投票 0

按钮悬停时，文本块需要在 c# 中显示一些文本

我有一个按钮。当鼠标悬停在按钮上时，我的项目中使用的文本块应该显示一些值。按钮是在库和我在项目中使用的库中定义的。在我的项目中我

c# wpf triggers hover textblock

回答 1 投票 0

悬停可顺利向上移动 div 卡

所以我有一个div，它是一张卡片和其中的内容。我设法让它向上移动一点，但过渡属性似乎不起作用。这是 HTML 代码 <... 所以我有一个 div，它是一张卡片和其中的内容。我设法让它向上移动一点，但过渡属性似乎不起作用。这是 HTML 代码 <div class="card"> <p> Title </p> </div> 这是 CSS 代码 .card:hover { position: relative; top: -10px; transition: 1s; } 所以基本上有多个卡片，并且当鼠标悬停在 .card 类的每张卡片上时它都会向上移动，但它会瞬间移动，过渡不起作用。有谁知道如何修复它？祝你有美好的一天这是因为您仅在 position 代码块中指定了 transition 和 :hover，这意味着直到悬停已经发生之后才指定转换时间。换句话说，仅悬停时更改的项目（top值）应位于:hover中。在 position 块之外指定 transition 和 :hover，例如： .card { position: relative; transition: 1s } .card:hover { top: -10px; } 您可以使用transform: translateY 试试这个 body { display: flex; justify-content: center; align-items: center; height: 100vh; } .box { border: 1px solid black; width: 150px; height: 150px; cursor: pointer; transition: all .5s ease-in-out; } .box:hover { transform: translateY(-10px); } <div class="box"></div> 不用使用 top ，它需要一个位置属性将其移出流程，只需添加一个边距来替换元素： .card:hover { margin-top: -20px; margin-bottom: 20px; transition: 1s; } /* for visualization purpose only */ body { padding-top: 50px; } div { border: 2px solid black; display: flex; justify-content: center; align-items: center; height: 40vh; width: 10vw; } <div class="card">Card</div @Mohamad 的回答很正确，但如果您想要更流畅的动画和更短的动作，请尝试： .box { transition: all .3s ease-in-out; } .box:hover { transform: translateY(-5px); }

html css hover position card

回答 4 投票 0

如何在 WPF 中的鼠标悬停时显示悬停信息气泡？

我想让鼠标悬停在 TextBlock 上时出现文本气泡。以下代码是我能得到的最接近的代码，但它只是将文本注入 TextBox.Text 本身并更改颜色。我想要...

c# wpf xaml hover mouseover

回答 2 投票 0

如何点击 div 来打开 YouTube 链接？

我通过 PNG 制作了一个自定义播放按钮，当光标悬停在视频缩略图上时会出现该按钮。但现在视频无法点击。如果我将指针事件设置为无，则不会产生悬停事件

html css button hover

回答 1 投票 0

flex 悬停元素未按预期运行

我已经为我的初创企业设置了一个网页的开头，但是我的一个 Flex 对象的 CSS 没有按预期进行。我在卡片上附加了一个 :hover 来更改