Jquery：无法褪色<span>元素

Question

我有一个span显示元素，我想淡入显示none。 淡出工作完全正常，但只是不工作褪色，

这里是span元素的CSS：

$(".button_5").hover(function() { 
 
     $(".box5 span.info").fadeIn(); 
 
    }); 
 

 
//The fade out just works fine: 
 

 
    $(".button_5").hover(function() { 
 
     $(".box5 span.info").fadeOut(); 
 
    });

.box5 span.info:before{ 
 
     content:"15 vacatures"; 
 
     margin:0; 
 
     padding:0 0 28px 0; 
 
     display:0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="col1"> 
 
     <div class="button_5"> 
 
      <div class="box5"> 
 
       <br><br> 
 
       <span class="title"></span><br/> 
 
       <span class="info"></span> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

也许你正在寻找类似

$(".button_5").hover(function() { 
    $(".box5 span.info").fadeToggle(); 
}); 

http://jsfiddle.net/oqfhuLzn/2/

Answer 2

您必须添加display: none您span.info元素，以淡入...

http://jsfiddle.net/oqfhuLzn/3/

.box5 span.info { 
    display: none; 
} 

Answer 3

如果去掉:before，改变你的代码工作的display: 0到display:none;

看看这个小提琴http://jsfiddle.net/qxu1gnme/1/

Answer 4

$(".button_5").hover(function() { 
    $(".box5 span.info").fadeIn(); 
}, function() { 
    $(".box5 span.info").fadeOut(); 
}); 

演示：http://jsfiddle.net/moogs/19ykuar2/2/