1

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

在火狐上工作

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();
});​

任何已知的修复？标签需要填满整个ali，这就是 display 设置为 block 的原因。

4

2 回答 2

3

工作时fadeToggle()它添加display: inline CSS到淡入淡出元素。您可以使用一些块元素，例如div/p来包装您的a.

只需使用

display: inline-block并.hidden_toggle a希望您的问题能够解决。

IE。

.hidden_toggle a {
    color: #999;
    border: none;
    display: inline-block; // change here
    width: 100%;    
    height: 90px;
}

演示

笔记

虽然display: inline-block对于较旧的 IE 版本会失败。

于 2012-06-25T03:04:41.660 回答
1

问题在于 fadeToggle() 函数是如何实现的。如果应用于跨度元素，它将在元素样式上使用 display:inline 作为切换的最终结果。这不是你想要的。

在您的 html 代码中将 <span/> 更改为 <div/> 以使其在任何地方都可以工作：http: //jsfiddle.net/GGsEt/3/

如果出于某些语义原因必须使用跨度，我认为除了使用 animate() 之外别无他法。

于 2012-06-25T03:45:05.313 回答