Question

我想在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;
}

Answer 1

这里有两个主要问题。首先，你要添加锚元素的转换，而不是它的“:: 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;
            }
        }

    }
}

注意转换是在伪元素上，并且我为此元素设置了初始状态的初始值（不透明度：0 + border：0）

Answer 2

您的代码中存在一些问题：

:before仅存在于:hover，但它应始终存在以显示动画。
transition在a上定义，但实际上应该在a:before上（概念上是一个不同的DOM元素）。
没有边框的初始状态，因此悬停时的转换将仅在默认情况下启动，而在取消悬停时向后转换将不起作用。要解决此问题，只需添加初始边框状态，如0px solid transparent。

以下是您的固定示例：http://codepen.io/anon/pen/wKxmvB

转换不适用于伪元素

2 个答案: