SCSS -悬停带有SVG的按钮有意外的延迟效果
SCSS是一种CSS预处理器，它扩展了CSS的功能，使得开发者可以更加高效地编写和维护样式代码。SCSS具有以下特点：
- 概念：SCSS是Sass的一种语法扩展，全称为Sassy CSS。它允许开发者使用变量、嵌套规则、混合（Mixin）、继承等高级功能，以及通过使用Sass的函数库来处理样式。
- 分类：SCSS属于CSS预处理器的一种，与Less、Stylus等预处理器类似。它可以将SCSS代码编译为普通的CSS代码，以供浏览器解析和渲染。
- 优势：
- 变量：SCSS允许使用变量来存储颜色、字体、尺寸等样式属性，方便在整个样式表中进行统一调整。
- 嵌套规则：SCSS允许在样式规则中嵌套其他规则，减少了代码的层级和重复性。
- 混合（Mixin）：SCSS允许定义可重用的样式块，类似于函数，可以在多个地方引用和调用。
- 继承：SCSS允许样式规则之间的继承关系，减少了重复的样式定义。
- 函数库：SCSS提供了丰富的函数库，用于处理颜色、数值、字符串等样式属性，增强了样式表的表达能力。
- 应用场景：SCSS适用于任何需要编写和维护大型、复杂样式表的项目。它可以提高开发效率、减少代码冗余，并且使样式表更易于维护和扩展。
- 推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
1回答
我有一个包含SVG图标元素的Button。当鼠标悬停在它上面时，我想要对SVG图标和文本进行重新着色。我的SCSS看起来是这样的： &.btn-highlight-green { background-color: white; color: $col
浏览 7提问于2020-10-16得票数 0
回答已采纳
1回答
我有一个栅格，在栅格的每一行上都有一个button.When，我点击了那个按钮，一个模态弹出窗口出现了，它有close按钮，但是只要我点击close按钮，close按钮所在行上的悬停效果就会出现在图片中我想延迟这个事件。
悬停效果是通过CSS tr:hover实现的，我不能按原样替换它，我只想在单击close按钮时延迟悬
浏览 0提问于2014-10-27得票数 0
与其他SVG延迟问题相比，这似乎是一个简单的问题。我关闭了CSS悬停的效果，所以它总是显示。我的版本是顶部文本块中的淡粉色辉煌商业：
我将transition-delay: 3000ms;添加到SVG中，这适用于悬停，但在页面加载时就不行了--它已经加载了。transition-delay是在SVG上使用的正确规则吗？
浏览 13提问于2022-05-17得票数 1
2回答
我试着在带有SVG的子链接上添加一个悬停效果。当链接悬停时，我想更改svg的停止颜色。将第一个悬停：
悬停第二个：
该类使用
浏览 11提问于2022-06-15得票数 0
回答已采纳
2回答
我的头上有一个带有CSS-class和-ID -ID的按钮。如果我悬停按钮，一个具有CSS-class和-ID -ID的对象应该打开.如果我离开按钮或目标，目标应该关闭。在关闭目标之前，把目标留给我的鼠标应该是有延迟的。有人能帮我解决这个问题吗？我是个编码初学者，这在我看来很难.我就是这么做的：
var openproduktkat = document.getE
浏览 2提问于2021-01-24得票数 0
3回答
我有一个菜单()，在这个菜单中，如果有以下鼠标事件，就会发生这种情况：
导致这不是我想要的效果。所以我在寻求帮助。如何解决这个问题，以便如果im拖动鼠标和我意外地触摸了其他一些菜单选项，javascript将足够聪明，知道它不应该隐藏所选的子菜单。我能在悬停上加上一些延迟吗？感谢所有的帮助！
浏览 8提问于2011-05-05得票数 1
回答已采纳
2回答
我试图将Font Awesome加载到我的项目中，但由于某些原因图标显示为空白。/scss/brands"; 当我使用一个图标时，例如<i class="fal fa-chevron-circle-right"></i>，它会得到Font Awese5Pro字体，并将图标设置为内容会不会是webpack的问题？ 编辑:生成的css具有以下内容： /*!([object Object]) format("svg</
浏览 47提问于2020-12-03得票数 0
1回答
CSS悬停视频
、、
我有一个问题，我的css悬停iframe的视频，我希望当光标悬停时，效果消失，如果你看到我的代码，悬停效果是工作的，但当你点击播放按钮视频播放过滤器，直到你把光标悬停。我想播放没有效果的视频，而不需要将光标放在上面。谢谢iframe { filter: url("data:image/svg+
浏览 1提问于2017-09-28得票数 0
我不确定如何包含鼠标悬停和单击需要循环浏览的所有6个按钮所需的两个操作。下面是带有延迟和两个按钮的代码示例。按钮有其他的区域，它们有鼠标经过和点击的动作，所以我把这两个都包括在内，这样过渡效果就更好了。
我正在使用延迟来慢慢地从一个按钮过渡到下一个按钮，但我很难让它循环。
浏览 1提问于2014-03-12得票数 1
我是CSS和web编程的新手。我想要做的是为按钮添加一个悬停效果。我使用2张图片来做这件事。有一个名为download的按钮，我在悬停代码中添加了： background-image:url(images/button2.png);
问题是按钮需要时间来加载，即:在悬停时会有延迟来显示按钮。编辑:我试着使用预加
浏览 0提问于2012-11-16得票数 0
3回答
按钮悬停效果
、、
我是CSS和web编程的新手。我想要做的是为按钮添加一个悬停效果。我使用2张图片来做这件事。有一个名为download的按钮，我在悬停代码中添加了： background-image:url(images/button2.png);
问题是按钮需要时间来加载，即:在悬停时会有延迟来显示按钮。编辑:我试着使用预加
浏览 1提问于2012-11-17得票数 1
2回答
我有几个带有悬停效果的svg矩形，当鼠标悬停在矩形上时，矩形的背景颜色会发生变化。悬停效果是通过css设置的： fill: rgb(255,128,0);除此之外，文本被放置在每个矩形的上方。一对文本和矩形定义一个组。height="40" />
<text x="30&qu
浏览 0提问于2012-08-22得票数 1
回答已采纳
我有一份物品清单。我想要在用户悬停在特定项目上时显示删除按钮。 我正在使用React with和ant typescript。/App.module.scss';import { getCasesList } from '../../assets/svg/deleteDraft.svg';
import { Mes
浏览 20提问于2020-06-30得票数 0
回答已采纳
我一直试图让svg5星级评级仅与SCSS和我关注的this来源。最初的链接使用的是font- and，而我正在尝试使用SVG。然而，我不能使悬停工作(例如，改变颜色的星星在悬停)。SCSS $icons: ( '<svg xmlns="http://www.w3.org
浏览 10提问于2020-09-10得票数 0
回答已采纳
1回答
突出显示值并保存
、、、、
我正在使用plots来缩放我的图，保存到svg，并向客户显示最有趣的间隔。我不能到达的东西--我需要用鼠标悬停显示数值来保存图片。 例如，我缩放，我指向我需要显示的值，我使用悬停查看值。 但是当我按下"Download plot“按钮时，它会被保存，没有悬停信息。下面是我在svg中看到的内容： ? 如何在保存的绘图上显示值？下面是我的示例代码：
浏览 24提问于2021-08-05得票数 0
我有4个SVG按钮，作为我的个人网页主菜单的一部分。悬停效果如预期的那样工作，，但现在我不能单击它。检查元素后发现，我正在上单击SVG<
浏览 2提问于2016-04-22得票数 2
2回答
重叠图像
、、
我正在尝试使用不规则(非矩形)按钮编写导航代码。这些边在Y轴上相互重叠，所以我不确定如何在HTML/CSS中做到这一点。我可以使用图像地图，但最好不要使用。有人能给我指个方向吗？谢谢!
浏览 0提问于2012-12-10得票数 0
回答已采纳
想知道这些家伙在如何把他们的黑色图标灰色在他们的CSS (“特色与爱”部分)。新来的，却搞不清楚。
他们是否允许我将黑色图标改为灰色图标？
浏览 6提问于2014-09-03得票数 6
回答已采纳
我有一些自定义的SVG图像，我想在ng-bootstrap datepicker中使用它们来替换默认的上一步和下一步按钮。我的第一步是将这些SVG图像用作Angular 2组件。我可以在我自己的应用程序和组件中做到这一点。但是我不能直接访问呈现datepicker的HTML，因此在ng-bootstrap date
浏览 21提问于2017-02-07得票数 0
我有以下几点：hover .right-arrow a {}
<div class="right-arrow">
浏览 4提问于2021-04-12得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
