在:: before伪元素上使用CSS转换

时间:2016-09-14 11:15:11

标签: css3 transactions css-transitions pseudo-element

.posts .img-hover:before {
  content: '';
  display: block;
  opacity: 0;
  -webkit-transition: opacity 1.2s ease;
  -moz-transition: opacity 1.2s ease;
  -ms-transition: opacity 1.2s ease;
  -o-transition: opacity 1.2s ease;
  transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before {
  content: '';
  display: block;
  background: url("img/Texture1.png");
  width: 320px;
  /* image width */
  height: 220px;
  /* image height */
  position: absolute;
  top: 13px;
  right: 2px;
  opacity: 1;
}
<div class="posts">
  <a href="#">
    <h2 class="postname"> 
         Travel Flashback #1 </h2>
  </a>
  <a class="img-hover" href="#">
    <img width="960" height="720" src="http://.." class="img-hover" alt="" />
  </a>
</div>

我对此代码有一个问题。如你所见,我希望转换到伪元素::之前,它有bkg img。

当我悬停时,转换工作顺利,但是当我离开鼠标时,bkg img会立即消失而不会过渡。

你能建议吗?

2 个答案:

答案 0 :(得分:6)

在悬停时,你可能只想要与转换相关的css,而不是伪元素的实际样式。试试这个

.posts .img-hover:before {
    content: '';
    display: block;
    background: url("img/Texture1.png");
    width: 320px; /* image width */
    height: 220px; /* image height */
    position: absolute;
    top: 13px;
    right: 2px;
    opacity: 0;
    -webkit-transition: opacity 1.2s ease;
    -moz-transition: opacity 1.2s ease;
    -ms-transition: opacity 1.2s ease;
    -o-transition: opacity 1.2s ease;
    transition:  opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
    opacity: 1;
}

答案 1 :(得分:0)

对于浏览该论坛的其他人,我遇到了与该主题完全相同的问题,我试图将转换焦点从

opacity 0.35s ease-in-out

收件人:

all 0.35s ease-in-out

,问题已解决。 我的浏览器是Chromium版本80.0.3987.162,Debian Linux 10.4