2

所以我有两个问题。一个是，当我在“主页”上时，我可能会将鼠标悬停在“关于”上，这会使关于它的颜色应该是白色，但主页会返回默认的灰色，这是不应该的。我希望我悬停的菜单项是白色文本，周围有一个灰色框，而我当前所在的页面（主页）仅在文本中以白色点亮，周围没有框。此外，当我将鼠标移开（不悬停在任何菜单项上）时，白色会停留在我最后悬停的任何项目上。我希望我所在的当前页面（主页）上的文本是白色的。

我注意到的另一个问题是，当我移动到关于选项卡时，主页和关于按钮的“尺寸”（填充？）与我在主页选项卡上时不同。因为它在 css 文件中，所以它应该适用于所有页面，对吧？

我正在为我的网页设计课程做一个网站，我对此很陌生，但几乎没有复制+粘贴就可以重新创建兰博基尼网站。你会看到我对菜单系统的意思，我希望它看起来一样（将鼠标悬停在菜单项上会使字体变白并在其周围显示一个灰色框，而当前菜单项保持白色（文本）没有盒子）。基本上与兰博基尼主页上的下拉菜单相同（您在菜单项上，子菜单就这样下拉）。

代码（菜单）CSS：

#dolphincontainer{
    position:relative; 
    color:#E0E0E0;
    background:#000000;
    padding-top:40px;
    width:100%;
    font-family:Helvetica,Arial,Verdana,sans-serif;
}
#dolphinnav {
    position:relative;
    font-size:16px;
    text-transform:uppercase;
    font-weight:bold;
    background:#000000 url(images/dolphin_bg.gif) repeat-x bottom left;
    padding:0 0 0 60px;
}
#dolphinnav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    float:left;
}
#dolphinnav ul li {
    display:block;
    float:left;
    margin:0 1px;
}
#dolphinnav ul li a{
    display:block;
    float:left;
    color:#3D3D3D;
    text-decoration:none;
    padding:0 10 0 20px;
    height:10px;
}
#dolphinnav ul li a span {
    padding:12px 20px 0 0;
    height:21px;
    float:left;
}
#dolphinnav ul li a:hover {
    background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;
}
#dolphinnav ul li a:hover span {
    display:block;
    width:auto;
    cursor:pointer;
}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
    color:#fff;
    background:#000000 url(images/dolphin_left-ON.gif) no-repeat top left;
    line-height:275%;
}
#dolphinnav ul li a.current span {
    display:block;
    padding:0 20px 0 0;width:auto;
    background:#000000 url(images/dolphin_right-ON.gif) no-repeat top right;
    height:33px;
}
#dolphin_inner{
    color: white; 
    padding: 5px; 
    font-size: 80%; 
    height: 1em
}

#dolphin_inner a:link, 
#dolphin_inner a:visited, 
#dolphin_inner a:active{color: white}
#dolphin_inner a:hover{color: yellow}
body {background-color:#000000;} 
.innercontent{display: none;}

代码（菜单）HTML：

<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
</ul>
</div>
<div id="dolphin_inner">
<div id="about" class="innercontent">   
</div>
</div>
</div>

<script type="text/javascript">

//dolphintabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX)
dolphintabs.init("dolphinnav", 0)

</script>
4

1 回答 1

0

这很容易做到。JSfiddle HERE 菜单看起来像这样。

<div> <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Heritage</a></li>
    <li><a href="#">Models</a></li>
    <li><a href="#">Dealers</a></li>
    <li><a href="#">Experience</a></li>
    <li><a href="#">Store</a></li> </ul>​ </div>

像这样的CSS。

body{
    background: black;
}
li{

    float: left;
    margin-right: 10px;
}
a{
    color: gray;
    text-decoration: none;
    padding: 5px 10px;
}
a:hover{
    color: white;
    background: gray;
}
a.active{
    color: white;
}
.hover{
    color: white;
}

而像这样的JQuery

$(function(){
    $('a').hover(function(){
        $('a').removeClass('hover');
        $(this).addClass('hover');
    });
});​
​

我所做的是，当前页面有一个“活动”类。当它具有“活动”类时，我将其 css 颜色设为白色。使用其他一些 Jquery 代码，您可以检测您所在的页面。我没有在这里包含它......如果你真的想要它，也许稍后会。但最重要的是，当它在该页面上时，您可以将"<a href='#'>"一个类“激活”。

好的接下来...

使用 JQuery，我使用了“悬停”。如果您将鼠标悬停在链接上，或者在这种情况下是导航项目，我将其命名为“悬停”类。如果你看一下css“.hover”它有“color：white;”。如果您将鼠标悬停在一个项目上，它会删除“悬停”类，但我现在悬停的项目，我给它一个“悬停”类。

希望它有所帮助。

于 2012-12-03T23:31:34.167 回答