css p：hover：：after/：：before平滑过渡

fdbelqdn 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(134)

我正在创建一个网格画廊。在每个img下面，我有一个图片的简短名称p。

<div id="projects-grid">
  <figure class="project-tile">
    <a href="">
      <img src="Portfolio_project_img_1.png" alt="">
      <p>Tribute Page</p>
    </a>
  </figure>
</div>

在每个p之前和之后，当鼠标悬停在p上时，我需要显示以下字符：“<”- before;“/>”-在此之后，我需要此过渡平滑，如ease-in-out, 0.3s
我现在有这样的CSS代码：

#projects-grid p:hover::after {
  content: " />";
  font-size: 1.1rem;
  vertical-align: baseline;
  color: orange;
}
#projects-grid p:hover::before {
  content: "< ";
  font-size: 1.1rem;
  vertical-align: 5%;
  color: orange;
}

我尝试将transition添加到#projects-grid p:hover::after和#projects-grid p:hover::before，但它不起作用。
那么，如何专门针对:hover::after和:hover::before中的那些字符呢？

css

来源：https://stackoverflow.com/questions/76550154/phoverafter-before-smooth-transition

1条答案

按热度按时间

new9mtju1#

要平滑地转换某些内容，您需要一个支持这种转换的特定CSS属性。

我的解决方案是从opacity:0过渡到opacity:1

为了避免内容在悬停时跳来跳去，伪元素总是占用页面上的空间，它们只是“看穿”，直到你将鼠标悬停在段落上。

#projects-grid p::after {
  content: " />";
  vertical-align: baseline;
}

#projects-grid p::before {
  content: "< ";
  vertical-align: 5%;
}

#projects-grid p::before,
#projects-grid p::after {
  font-size: 1.1rem;
  color: orange;
  transition: opacity 0.3s ease;
  opacity: 0;
}

#projects-grid p:hover::after,
#projects-grid p:hover::before {
  opacity: 1;
}

<div id="projects-grid">
  <figure class="project-tile">
    <a href="">
      <img src="Portfolio_project_img_1.png" alt="">
      <p>Tribute Page</p>
    </a>
  </figure>
</div>

你的问题很可能是你只是试图“将元素转换为存在”，或者你使用了一个不支持平滑动画转换的属性--比如visibility:hidden到visibility:visible--它只是瞬间翻转。

旁注：找到一个支持平滑过渡的CSS prop 列表可能很棘手。大多数列表，如https://www.quackit.com/css/css3/animations/animatable_properties/，只包括每一个可以转换的 prop ，但没有提到visibility是不平滑的，只是从可见到不可见的瞬间翻转。

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

我来回答

css p：hover：：after/：：before平滑过渡

1条答案

相关问题

热门标签

最新问答