hover 相关问题

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

尝试让悬停和CSS正确高亮

我在 CSS 突出显示表格中正确的行以及当鼠标悬停在这些行上时允许突出显示时遇到问题。 serverA 和 ServerR 的行看起来像我想要的那样。然而，服务器在哪里

html css hover

回答 1 投票 0

Flutter Listtile 悬停颜色不起作用

我正在尝试向列表图块添加悬停效果。我尝试将其包装在 Material 小部件中以启用它。平铺颜色工作正常，但悬停颜色不起作用。请提出一些想法...

flutter hover flutter-list-tile

回答 1 投票 0

悬停效果被视为点击效果，但在调整页面大小后它们可以正常工作

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

javascript html css animation hover

回答 1 投票 0

如何向 :hover 元素添加动画？

我需要一个 :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 来更改