css过渡悬停与字体真棒

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;：

＆＃13;

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;