css transition hover with font awesome

Question

尝试在悬停时添加左 V 形，但过渡无效

div.bx-wrapper:hover div.bx-controls-direction::before{
   content: "\f053";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 30px;
    left: 0;
    opacity: 1;
 }
 
 div.bx-wrapper div.bx-controls-direction::before{
 opacity: 0;
  transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -webkit-transition: opacity 2s ease-in-out;
 }

不知道哪里错了

Answer 1

您应该在选择器的默认状态下设置所有 CSS(包括过渡)，然后只在悬停状态下设置 opacity:1;:

div.bx-wrapper div.bx-controls-direction::before{
    content: "\f053";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 30px;
    left: 0;
    opacity:0;
    transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -webkit-transition: opacity 2s ease-in-out;
}
    div.bx-wrapper:hover div.bx-controls-direction::before{
        opacity:1;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="bx-wrapper">
  Hover Me
  <div class="bx-controls-direction">FontAwesome</div>
</div>