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