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;}

Answer 1

您需要将一个类（即悬停活动）分配给最后悬停的对象。这意味着只要菜单项悬停，您就可以使用“hover-active”类从列表中的任何对象中删除“hover-active”类。

您还需要在当前菜单项中添加类似“active-tab”的类，只要单击其他选项卡，您就可以重新分配。

说你的html看起来像这样：

<ul id="menu">
    <li class="hover-active">Home</li>
    <li class="active-tab">About</li>
    <li>Other</li>
</ul>

你的css看起来像这样：

#menu li {
    color: gray; // Default font color of gray
}
#menu li:hover {
    background-color: gray; // Gray box while hovering
    color: white; // Font color white while hovering
}
#menu .hover-active {
    color: white; // Font color white on last hovered
}
#menu .active-tab {
    color: white; // Font color white on current active tab
}

菜单颜色＆amp;滑动居中问题

1 个答案: