转换不能在伪元素上工作

-1

我想在CSS3中使用转换效果，但效果不起作用。我想我可能犯了一个错误，但我不知道它在哪里。转换不能在伪元素上工作

在悬停时，我想在伪元素之前创建一个转换边界。我做了一个密码：http://codepen.io/Tef/pen/JYBMgR

<div class="container wrap"> 
<div class="row"> 
    <div class="box"> 
     <a href="#"> 
      <img src="http://placehold.it/90x90/000000" alt="" /> 
     </a> 
    </div> 
</div> 
</div> 

.wrap { 
    margin-top: 50px; 
} 
.wrap a { 
    position: relative; 
    display: inline-block; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    -ms-transition: all 1s; 
    transition: all 1s; 
} 
.wrap a:hover:before { 
    content: ''; 
    border: 7px solid #ffffff; 
    opacity: .7; 
    width: 90px; 
    height: 90px; 
    position: absolute; 
    left: 0; 
    top: 0; 
}

来源

2015-11-03 Stephane Savona

，你可以用相同的颜色添加边框为您背景和改变它悬停。 –

-1

这里有两个主要问题。首先，您要为anchor元素添加一个转换，而不是“:: before”伪元素。其次，你没有设置伪元素的初始状态，你将所有东西都设置为悬停状态。如果你想转换，你需要一个初始状态和一个结束状态。例如：

.wrap { 
    margin-top: 50px; 
    a { 
     position: relative; 
     display: inline-block; 

     &::before{ 
      -webkit-transition: all 1s; 
      -moz-transition: all 1s; 
      -o-transition: all 1s; 
      -ms-transition: all 1s; 
      transition: all 1s; 
      content: ''; 
      border: 0 solid #ffffff; 
      opacity: 0; 
      width: 90px; 
      height: 90px; 
      position: absolute; 
      left: 0; 
      top: 0; 
     } 

     &:hover { 
      &::before { 
       border: 7px solid #ffffff; 
       opacity: .7; 
      } 
     } 

    } 
}

通知的过渡是伪元件上，并且我已经设置为inital状态的初始值对于此元素（不透明度：0 +边界：0）

来源

2015-11-03 12:16:27 leuquim

-1

有一个在代码中几个问题：

:before只存在于:hover，但它应该永远在那里，以显示动画。
transition定义在a上，但实际上应该在a:before（它在概念上是不同的DOM元素）。
边界没有初始状态，所以悬停时的转换只会在默认情况下开始，而在非悬停状态下向后转换不起作用。要解决这个问题，只需添加一个初始边界状态，如0px solid transparent。

这是你的固定例如：http://codepen.io/anon/pen/wKxmvB

来源

2015-11-03 12:18:03

这是为什么downvoted？为什么这个问题和每个答案都被低估了？看起来有人在横冲直撞... –

转换不能在伪元素上工作

回答

相关问题