hover 相关问题

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

快速移动光标时未触发 onMouseLeave 事件

我正在尝试实现悬停事件,但 onMouseLeave 在离开元素时并不总是触发,特别是在快速将光标移动到元素上时。我尝试了 Chrome、Firefox 和 Internet Explorer...

回答 3 投票 0

即使使用正确的语法,悬停也不起作用?

我正在为学校做最后一个项目,我正在尝试编写一段文本(在本例中为 d0),当我将鼠标悬停在门上时,它会出现,这是一个图像类。 身体 { 背景-c...

回答 1 投票 0

我怎样才能让雷达chart.js中的所有图表在悬停时显示数据列表?

我正在尝试制作一个图表,当我将鼠标放在生成的所有区域而不仅仅是节点中时,数据就会显示出来。这个想法是悬停显示整个数据。 这就是...

回答 1 投票 0

有没有一个选择器只影响最里面的:hover 只与 CSS 匹配?

对于管理自定义布局的功能,我创建了一个带有区域指示的小向导,以提供查看您正在编辑哪个区域的机会。 由于它是嵌套布局,因此所有容器都有...

回答 2 投票 0

如何为无边框图标添加渐变颜色

我想做一个类似的图标,我想在悬停时用渐变颜色完全填充一个图标,没有边框,只有心形。我用的是fontawesome。 html: 我想制作一个类似的图标,我想在悬停时用渐变颜色完全填充一个图标,没有边框,只有心形。我用的是fontawesome。 html: <i class="far fa-heart"></i> 萨斯: i{ position: absolute; left: 70vmin; top:2vmin; font-size: 1.6em; z-index: 100; cursor: pointer; font-weight: 100; &:hover{ transition: all .8s ease-in-out; -webkit-background-clip: text; font-weight: 900; background-image: linear-gradient($color-primary, $color-secondary); -webkit-text-fill-color: transparent; } 我看到很多人使用背景剪辑和文本填充颜色,但图标只是消失了。 有什么解决办法吗? 谢谢 你可以这样实现: i{ position: absolute; left: 70vmin; top:2vmin; font-size: 1.6em; z-index: 100; cursor: pointer; font-weight: 100; } i:hover:before{ transition: all .8s ease-in-out; -webkit-background-clip: text; font-weight: 900; background-image: linear-gradient(red, yellow); -webkit-text-fill-color: transparent; } <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <i class="far fa-heart"></i>

回答 1 投票 0

过渡效果在 html css 中悬停时不起作用

`当鼠标悬停在 .bg-gradient 上时,我想做一些缓慢的平滑过渡,当我从悬停中删除光标时也一样,但它来得很快,悬停时很快就消失了` `.asc { 高度:500px; 背景位置...

回答 1 投票 0

悬停时视频重置而不是暂停! JavaScript

这是一个 JavaScript,它在悬停时播放视频并在悬停时暂停,有人可以对其进行修改,以便在悬停时重置吗? const 视频 = document.querySelectorAll(" .hover_video_wrapper .vide...

回答 1 投票 0

CSS:如何在 Shadow DOM 中添加悬停效果 ::slotted

我有影子 DOM 元素, 我想要悬停效果&...

回答 1 投票 0

回答 1 投票 0

我们可以使用 spire.xls 在 .NET 代码中在 Excel 工作表的单元格上添加工具提示吗?

我们可以使用 Spire.xls 在 .NET 代码中的特定 Excel 工作表中的每个单元格上添加工具提示吗? 我已经用谷歌搜索但没有得到正确的答案,尽管下面的解决方案对我不起作用。 有没有...

回答 1 投票 0

CSS 效果区域问题:悬停

.导航栏 { 列表样式类型:无; 行高:3em; 内边距:5px; } .navbar李 { 位置:相对; 右内边距:200px; 顶部:-5px; 显示方式:内嵌; 光标:指针; } .navbar李:...

回答 1 投票 0

Tkinter 悬停在按钮上 -> 颜色更改

悬停在按钮上后是否可以更改按钮的背景颜色? Tkinter 中的代码是什么?

回答 2 投票 0

更改悬停时的背景

我希望整个背景在悬停时发生变化。目前,颜色变化的宽度包含原始文本加上填充的宽度,而不是 submemu 的整个宽度。 我尝试过

回答 1 投票 0

我的网站上有一个图像链接,当我将鼠标悬停在其上时,该链接会发生变化,如何将两个图像都转换为链接?

我的网站使用图像作为另一个页面的链接,我决定将鼠标悬停在图像上时更改图像,以获得一些额外的效果。我找到了一种方法,但我发现悬停

回答 1 投票 0

当鼠标悬停在表格单元格上时,我想向单元格添加边框以突出显示它。但是当我这样做时,所有其他单元格的宽度和高度都会受到影响

我有一个简单的介绍页面的以下 html 代码。在鼠标悬停(悬停)事件上,我将添加边框以突出显示单元格。但是当我使用现有的代码和 css 执行此操作时,所有单元格高度和 wi...

回答 1 投票 0

使div在悬停时展开

基本上,我只是想创建一个我悬停的div的“相对”放大。我尝试了以下方法,但输出是一场灾难。帮助将不胜感激! 。物品 { 位置:相对;

回答 3 投票 0

CSS 中不应用悬停效果。确切的问题是什么?

我正在尝试为搜索栏构建搜索列表,当光标放置在列表中时,列表应该改变颜色,并且当从显示的项目列表中单击时,列表应该被选中。 搜索列表.jsx: 导入反应...

回答 1 投票 0

悬停:秤不适用于顺风轨?有什么建议吗?

这是我的代码,我想将 hide:Scale 实用程序从 tailwindCSS 应用到我的链接框,但它不起作用。知道我在这里制造了什么冲突吗? <% content_for :javascript_includes...

回答 1 投票 0

Bokeh HoverTool 未以正确的格式显示时间戳

每当我绘制任何具有“hh:mm:ss”格式时间的图表并使用悬停工具在图中任意点查看相同格式的时间戳时,我都会看到一个带有

回答 1 投票 0

将任何类的悬停扩展到 SASS 或 SCSS 中的任何其他类的悬停

有没有办法将 &:hover 任何类的悬停扩展到任何其他类的悬停? 我的代码是这样的,它停止了两个类的悬停: 超文本标记语言 有没有办法将任何类的&:hover扩展到任何其他类的悬停? 我的代码是这样的,它停止了两个类的悬停: HTML <a href="#" class="button1">Button 1</a> <a href="#" class="button2">Button 2</a> SCSS .button1 { background: black; padding: 5px 10px; text-decoration: none; color: white; &:hover { background: red; } } .button2 { background: blue; padding: 5px 10px; text-decoration: none; color: white; &:hover { @extend .button1:hover } } 您可以使用占位符。 %hover { background: red; } .button1 { background: black; padding: 5px 10px; text-decoration: none; color: white; &:hover { @extend %hover; } } .button2 { background: blue; padding: 5px 10px; text-decoration: none; color: white; &:hover { @extend %hover; } } 或者,也许更好的解决方案是为按钮使用更通用的类: .btn { padding: 5px 10px; text-decoration: none; color: white; &:hover { background: red; } } .btn--1 { background: black; } .btn--2 { background: blue; } 您可以使用mixin @mixin hoverStyle { &:hover{ background: red; } } .button1 { background: blue; padding: 5px 10px; text-decoration: none; color: white; @include hoverStyle; } .button2 { background: blue; padding: 5px 10px; text-decoration: none; color: white; @include hoverStyle; } 尝试这个解决方案。这对我有用 http://jsbin.com/lezuwalida/edit?html,css,输出 生成的CSS看起来是一样的 .demon:hover, .demon.demo { outline: 3px solid red; } .demon2:hover, .demon2.demo2 { outline: 3px solid red; } 对我来说,它可以使用这种较新的 sass 语法。 .link:hover { .button { @extend .other-button, :hover; } } 处理所有这些事情的一个好方法是使用变量, 例如,如果您定义这样的内容: $buttons-hover-color: #somecolor; 然后您可以在任何按钮中调用它,如果将来您想更改它,只需更改变量即可,所有按钮都会更新。 另一件重要的事情是扩展在媒体查询中不起作用,所以也许将来当你瞄准移动设备时你不希望在移动设备中出现红色,所以你只需要为其创建另一个变量。 类似这样的: $btn-hover-color: red; $btn-hover-mobile: black; .button1 { background: black; padding: 5px 10px; text-decoration: none; color: white; &:hover { background-color: $btn-hover-color; } } .button2 { background: blue; padding: 5px 10px; text-decoration: none; color: white; &:hover { background-color: $btn-hover-color; } @media (max-width: 800px) { &:hover { background-color: $btn-hover-mobile; } } } 希望这对您有帮助

回答 5 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.