Question

所以我有两个问题。其中之一就是，当我在“Home”时，我可能会将鼠标悬停在“关于”上，它会给出它应该是白色的颜色，但Home会返回到默认的灰色，但不应该这样。我希望我正在盘旋的菜单项是白色文本，周围有一个灰色框，而我当前所在的页面（Home）只在文本中以白色点亮，没有任何框。此外，当我移开鼠标时（不会将鼠标悬停在任何菜单项上），白色会保留在我最后一次徘徊的任何项目上。我希望当前页面上的文本（Home）为白色。

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

我正在为我的Webdesign课程做一个网站，我对此很新，但几乎没有复制+粘贴，几乎重新创建了兰博基尼网站。你会看到我对菜单系统的意思，我希望它看起来一样（将鼠标悬停在菜单项上会使字体变成白色，并且当前菜单项保持白色（文本）时没有白色）框）。基本上是与兰博基尼主页上相同的下拉菜单（你在菜单项和子菜单上的下拉菜单就是这样）。

代码（菜单）的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>

Answer 1

这很容易做到。 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我使用“悬停”。如果您将鼠标悬停在某个链接上，或者在这种情况下是一个导航项，我会将其命名为“hover”。如果你看一下css“.hover”它有“color：white;”。如果你将鼠标悬停在一个项目上它会删除“hover”类，但是我现在正在盘旋的项目，我给它一个“hover”类。

希望有所帮助。

菜单颜色＆amp;菜单问题

1 个答案: