动画linkBorderHover不能与元素之前的::after /：：一起使用？

基础概念

linkBorderHover 是一种 CSS 动画效果，通常用于在鼠标悬停时改变元素的边框样式。::after 和 ::before 是伪元素，用于在元素内容的前后插入内容。

问题分析

linkBorderHover 动画与 ::after 或 ::before 伪元素一起使用时可能会遇到问题，主要是因为 CSS 动画和伪元素的层叠上下文（stacking context）以及渲染顺序。

原因

层叠上下文：CSS 动画和伪元素可能会创建不同的层叠上下文，导致动画效果不正确。
渲染顺序：浏览器在渲染页面时，伪元素的内容可能会在动画开始之前或之后渲染，导致动画效果不一致。

解决方法

方法一：使用 `z-index` 控制层叠顺序

通过设置 z-index 属性，可以控制伪元素和动画元素的层叠顺序，确保动画效果正确。

.element {
  position: relative;
  z-index: 1;
  animation: linkBorderHover 1s ease-in-out;
}

.element::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}

方法二：使用 `transform` 属性

通过使用 transform 属性，可以创建一个新的层叠上下文，确保动画效果正确。

.element {
  position: relative;
  animation: linkBorderHover 1s ease-in-out;
}

.element::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transform: translateZ(0);
}

方法三：调整动画和伪元素的顺序

通过调整动画和伪元素的顺序，确保伪元素在动画开始之前渲染。

.element {
  position: relative;
}

.element::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

@keyframes linkBorderHover {
  0% {
    border: 1px solid #000;
  }
  100% {
    border: 2px solid #f00;
  }
}

.element:hover {
  animation: linkBorderHover 1s ease-in-out;
}

应用场景

这种问题常见于需要在元素悬停时改变边框样式，并且在元素内容前后插入额外内容的场景，例如按钮、卡片等 UI 组件。

参考链接

通过以上方法，可以有效解决 linkBorderHover 动画与 ::after 或 ::before 伪元素一起使用时的问题。

动画linkBorderHover不能与元素之前的::after /：：一起使用？

、

我尝试使用::after为悬停时的链接制作动画，::before元素和::after元素就消失了，仅此而已。我不明白问题出在哪里？这是我的代码的JSFiddle。

浏览 10提问于2019-10-19得票数 2

回答已采纳

1回答

如何使用css在文本框中添加占位符

我确实有一个旧的struts项目，我想在现有的css类的帮助下放置占位符，因为我必须做这个更改100个s of number of jsps，我想在css中做一次。no-repeat; content: "Enter your number";我在boxLookupMan类中添加了内容属性，之后我的文本框应该显示“输入您的编号”文本，因为placeholder.which不起作用。请建议其他方法，或改进当前的

浏览 0提问于2018-04-26得票数 0

4回答

CSS -将文本添加到样式表中的样式

我还没有找到任何文档，所以我不认为这是可行的。但这是值得一问的。我有几个地方在相同的div位置中使用相同的文本。我没有使用javascript或在div中重新输入相同的文本，而是在思考是否可以在样式中插入实际的“文本”。

浏览 0提问于2011-09-01得票数 6

回答已采纳

2回答

使用Dart为SVG元素设置动画

、

我想使用Dart来制作SVG元素的动画。这就是缓慢地将"dart:svg“包的RectElement从一个y坐标移动到另一个y坐标。不幸的是，我找不到一个例子。我还尝试使用这里的动画包，但它似乎不能与SVG元素一起工作。

浏览 3提问于2013-05-24得票数 3

回答已采纳

1回答

使用fade flexslider时未触发After事件

我正在使用flexslider event来触发另一个函数，但是flexslider中的after事件不能与iPad上的淡入淡出一起工作。使用幻灯片作为动画解决了这个问题，但我需要淡入淡出而不是幻灯片。slideshowSpeed: 5000, controlNav: false, after

浏览 4提问于2012-11-10得票数 2

1回答

Tkinter画布小部件

、

以前也发生过这种情况，但不幸的是我找不到这个程序。Child(ball): childball = Child() time.sleep(1) 例如，它每次都会返回不同的错误

浏览 2提问于2014-06-25得票数 1

1回答

在android中放大动画

、

我想在android中实现下面的动画，我已经尝试过场景，但根据文档确认，场景不能与文本一起工作：如果尝试用动画调整TextView的大小，文本将在对象完全调整大小之前弹出到新位置。要避免此问题，请不要动画调整包含文本的视图的大小。请使用任何解决方案，放大的布局文本也可以包含图像。animation video

浏览 61提问于2019-05-07得票数 1

1回答

我可以在一个无容器的剔除元素中使用动画转换绑定吗？

、

如果我有一组用无容器的前景构造的DOM元素，那么是否有可能与它们一起使用剔除动画转换呢？例如后加，后移，后移。<!

浏览 2提问于2015-09-25得票数 1

回答已采纳

1回答

动画中断块对齐

、

我的问题可以从下面的片段中看到。我的动画工作很好，但它破坏了这里的项目对齐。如果您从其中删除动画，您将看到元素粘在一起，创建了一个标记在一起。然而，如果我添加一个简单的移动动画，它会令人遗憾地崩溃。after元素附着在父元素上？width: 40px; display: flex;

浏览 0提问于2018-11-18得票数 0

回答已采纳

1回答

Gsap是否自行更改固定位置属性静态？

、、、、

在我的反应项目中使用gsap动画库时，当鼠标进入事件被激发到它的父元素时，有一个特定的div动画，我已经将该元素的位置设置为固定，在我添加gsap动画之前div并没有与其他内容一起移动，但是在应用了div不再固定的动画之后，如何使该元素不与页面的其余部分一起移动或滚动？我也试着用gsap把它的

浏览 14提问于2022-03-31得票数 0

1回答

使用jquery在具有向下滑动效果的特定行之后添加一行

、、、

我需要设计一个树状的表格结构，这样点击一个特定的行，它就会滑下来，并添加下面的新行。(只需设计Category和Sub category结构。) $("#category" + categoryI

浏览 3提问于2014-03-21得票数 0

3回答

：使用属性选择器之前

、、

<p>Field2</p></div>div input[required]:before { color: #f00; content: "*"; } 但是，此css行不会在文档中进行可见的更改。

浏览 0提问于2012-09-14得票数 4

回答已采纳

2回答

在wordpress中，在页面完全加载后启动动画

、、、

我有一个wordpress站点，我添加了一些带有动画的“原始html”元素。问题是，动画是从页面加载开始的，而不是等待预加载器完成并显示页面本身。我是wordpress (和JS)的新手，所以，我不会编辑wordpress的php/js文件。仅使用“原始HTML”元素。谢谢!

浏览 0提问于2016-03-04得票数 0

1回答

如何检测何时所有动画都已停止？

、、

我使用这段代码来停止2个元素的同步动画：动画可以通过最终用户将鼠标悬停在按钮上来停止，在这种情况下，动画在完成后停止(这就是我想要的)。但是，按钮悬停也会启动另一个函数(移除并重新加载元素)，如果该函数在动画完成之前运行，则会发生冲突。我在想，在上面的代码中使用'

浏览 1提问于2014-11-13得票数 1

1回答

如何将SVG组作为一个整体动画化？

、、

我正在使用Snap.svg制作动画。我现在有两个元素(一个圆圈和一个椭圆)要画。这些元素一起平移，椭圆也会旋转和改变形状。我可以使用Element.animate()函数在Snap.svg中动画每个元素，但它是非常棘手的，以保持它们的和谐转换。那么，我怎样才能把这些元素作为一个整体来动画呢？html片段放在上。PS:属性cx和cy的centroid不</e

浏览 1提问于2013-12-25得票数 0

回答已采纳

1回答

VSCode插件的eCSSTractor不适用于className

、、、、

eCSSTractor不能与react jsx语法一起使用。不翻译css中的"className“元素。

浏览 1提问于2020-06-26得票数 0

1回答

无法向画布添加伪元素？

、

因此，我目前正在为一个HTML5游戏开发一个地图编辑器，同时，我想向包含构建块的缩略图的画布中添加一些伪元素。但是经过一个小时的实验和谷歌搜索都没有成功，我就是不能让这个伪元素出现，我试着把css应用到一个div上，它出现了，所以我猜画布元素有什么特别的地方吗？下面是一个简单的iv'e设置示例：所以，我转向你们，在stackoverflow这里的所有了解的人，来寻求答案，不可能将伪元素添加到canvas元素</em

浏览 0提问于2013-03-24得票数 12

回答已采纳

1回答

skrollr.js响应性

、、

我刚开始使用Skrollr.js -我能够制作我想要的动画，但是我需要使用position:fixed；让我的元素将它们精确地定位在它们应该在的位置。问题是，如果你的屏幕没有达到一定的大小，动画就会被截断或不居中。有没有更好的方法来定位元素或Skrollr，我可以做些什么来解决这个问题？我有3个元素，一起来做一个标志，所以它需

浏览 0提问于2014-12-21得票数 0

2回答

css内容图像放置

、

-- /mp-menu --> 这个问题指的是第一个li，在这里，我按照css定义了图标M-显示.很奇怪，我显然错过了一些基本的东西，毫无疑问，任何建议都很受赞赏。

浏览 1提问于2015-05-15得票数 0

回答已采纳

2回答

Aurelia路由器视图动画与交换-order=“with”

我使用奥雷利亚-动画师-css动画路由器视图。在导航到一个新的路由器视图时，我希望当前视图从屏幕左边滑动，而新视图从右边滑到屏幕上。下面是我的路由器视图元素：以下是每个视图中的顶部元素： <div class="pages au-animate使用swap-order=&q

浏览 6提问于2016-08-23得票数 5

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

动画linkBorderHover不能与元素之前的::after /：：一起使用？

基础概念

问题分析

原因

解决方法

方法一：使用 z-index 控制层叠顺序

方法二：使用 transform 属性

方法三：调整动画和伪元素的顺序

应用场景

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

方法一：使用 `z-index` 控制层叠顺序

方法二：使用 `transform` 属性