css 悬停时如何在伪元素之前连接转换到：：？

p1tboqfb 于 2023-01-22 发布在其他

关注(0)|答案(2)|浏览(128)

这个问题是migrated从网站管理员堆栈交换，因为它可以回答堆栈溢出。Migrated 19小时前。
我创建了一个包含背景图像的div，当鼠标悬停时，背景图像上会显示橙色。我使用了::before伪元素来完成这一点。但是我希望悬停平滑，所以我使用了过渡。不幸的是，它不起作用。我不知道为什么。我想你们能帮上忙。

.img{
  color: white;
  height: 400px;
  background-image: url("https://watermark.lovepik.com/photo/20211203/large/lovepik-serious-businessman-picture_501473287.jpg");
  width: 100%;
  background-size: cover;
  background-position: top 35% right 0;
  position: relative;
  float: left;
  transition: all 5s;
}

.img:hover::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 88, 0, 0.7);
}

<div class="img"></div>
<h4>Jon Doe</h4>
<p>Web Developer</p>

css

来源：https://stackoverflow.com/questions/75190722/how-to-connect-transition-to-before-psuedo-element-on-hover

2条答案

按热度按时间

bvjxkvbb1#

你需要给::before伪元素添加转换。另外，在它进入悬停状态之前添加content属性。

.img::before {
  content: "";
  transition: all 5s;
}

赞(0）回复(0）举报 2023-01-22

pieyvz9o2#

我在这里找到了解决方案：伪元素（：：before）上的CSS3转换不起作用

问题是当容器没有被悬停时伪元素不存在 *

因此，我添加了.img::before部分，并将过渡从.img移动到.img:hover::before，它正在工作。

.img{
  color: white;
  height: 400px;
  background-image: url("https://watermark.lovepik.com/photo/20211203/large/lovepik-serious-businessman-picture_501473287.jpg");
  width: 100%;
  background-size: cover;
  background-position: top 35% right 0;
  position: relative;
  float: left;
}

.img::before{
  content: "";
}

.img:hover::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 88, 0, 0.7);
  transition: all 5s;
}

赞(0）回复(0）举报 2023-01-22

我来回答

css 悬停时如何在伪元素之前连接转换到：：？

2条答案

相关问题

热门标签

最新问答