fadeToggle() fails on chrome/safari due to display block on <a> tag

Posted by kylex on Stack Overflow See other posts from Stack Overflow or by kylex
Published on 2012-06-25T03:03:01Z Indexed on 2012/06/25 3:15 UTC
Read the original article Hit count: 110

Filed under:

http://jsfiddle.net/GGsEt/3/

Works on firefox

HTML

<ul>
    <li class="lib_undefined">
       <span class="hidden_toggle">
           <a href="/">Test</a>
       </span>
    </li>
</ul>
?

CSS

.hidden_toggle{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #999;
    line-height: 80px;
    display: none;
}
    .hidden_toggle a{
        color: #999;
        border: none;
        display: block;
        width: 100%;    
        height: 90px;
    }

.lib_undefined{
    min-height: 90px;
    border: 1px solid #000;
}

jQuery

$('.lib_undefined').hover(function(){
     $(this).children('.hidden_toggle').fadeToggle();
});?

Any known fixes? The a tag needs to fill the entire li, which is why display is set to block.

© Stack Overflow or respective owner

Related posts about jQuery