0

只是为了设置场景，我对 jQuery（但不是网页设计）缺乏经验，所以在这里我会很感激一些帮助！

基本上，我试图让导航栏上的悬停状态淡入（悬停时）和淡出（鼠标关闭）。这是一个简单的导航栏，没有图像，只是伪选择器加倍作为类，这样 jQuery 就可以实际选择 CSS 好了。

我尝试了许多脚本，但似乎找不到我要找的东西。代码很简单，解决方案很简单，但我绝对没有运气，所以我们开始吧。

HTML：

<ul>
    <li><a class = "tab selected" href = "index.html">home</a></li>
    <li><a class = "tab" href = "portfolio.html">portfolio</a></li>
    <li><a class = "tab" href = "index.html">contact</a></li>
</ul>

CSS：

nav ul li a.tab { 
    display: inline-block; 
    padding: 15px 20px; 
    min-width: 40px; 
}   

nav ul li a.tab:link, nav ul li a.tab.link { 
    padding: 15px 20px; 
    color: #656359; 
    text-align: center; 
}

nav ul li a.tab:visited, nav ul li a.tab.visited { color: #656359; }

nav ul li a.tab:hover, nav ul li a.tab.hover { 
    padding: 15px 20px; 
    background-color: #d5d1bc; 
}

nav ul li a.tab:active, nav ul li a.tab.active { color: #901f78; }

jQuery：

$('.tab.hover').hover(
    function(){
        $(this).fadeIn();
    }, 
    function(){
        $(this).fadeOut();
    }        
);

我也尝试使用 mouseover/mouseout 功能，但没有运气。我只是在浏览器中没有任何变化。我的 jQuery 文件也正确连接。

这是一个非原创的帖子，但经过 2 天的研究，我没有想法，所以提前谢谢！

4

2 回答 2

2

这可以通过 CSS3 完成。

您可以通过将以下 CSS 放入类中来设置项目的背景过渡以缓入和缓出tab：

transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;

您可以通过更改第二个参数的值来更改淡入淡出时间（.5s 为 0.5 秒）

工作示例：http: //jsfiddle.net/BGKyp/1/

于 2012-09-22T23:48:41.773 回答
0

尝试这样的事情：

$(function(){
  $('.tab').parent().hover(
    function(){
        //$(this).find('.tab').stop().fadeIn();
        $(this).find('.tab').stop().fadeTo("fast",1);
    }, 
    function(){
        //$(this).find('.tab').stop().fadeOut(); //this sets display to 'none'; so we cant have hover events again; switch to 'fadeTo()' instead
        $(this).find('.tab').stop().fadeTo("fast",0.01);        
    }        
  );  
});

和CSS如下：（我假设你<ul>在里面<nav>）

nav ul li{
    height: 40px;
}
nav ul li a.tab {  
    padding: 15px 20px; 
    min-width: 40px; 
}   

nav ul li a.tab:link, nav ul li a.tab.link { 
    color: #656359; 
    text-align: center; 
}

nav ul li a.tab:visited, nav ul li a.tab.visited { color: #656359; }

nav ul li a.tab:hover, nav ul li a.tab.hover { 
    background-color: #d5d1bc; 
}
于 2012-09-23T00:04:35.303 回答