0

我一直在努力让导航菜单的悬停功能正常工作，但它只是不改变颜色，有什么想法吗？

如果我没有针对不同列表项的单独类但我希望它们具有不同的颜色但在悬停时都变为相同的颜色，它会起作用。

    #container .navigationContainer .navigation
{
    float: right;
    margin: 44px 0 0 0;
    padding: 0; 
}

#container .navigationContainer .navigation ul
{
    list-style: none;   
}

#container .navigationContainer .navigation li.home
{
    margin: 0 0 0 26px;
    padding: 12px 0 0 0;
    width: 156px;
    display: inline;
    float: left;
    font: normal .75em "Times New Roman", Times, serif;
    color: #369ed1;
    border-top: solid 2px #369ed1;
}

#container .navigationContainer .navigation li.home a,
#container .navigationContainer .navigation li.home a:link,
#container .navigationContainer .navigation li.home a:active,
#container .navigationContainer .navigation li.home a:visited
{
    color: #369ed1;
    text-decoration: none;
    width: 156px;
}

#container .navigationContainer .navigation li.home a:hover
{
    color: #373431;
    border-top: solid 2px #373431;
}
#container .navigationContainer .navigation li.about
{
    margin: 0 0 0 26px;
    padding: 12px 0 0 0;
    width: 156px;
    display: inline;
    float: left;
    font: normal .75em "Times New Roman", Times, serif;
    color: #a6bb54;
    border-top: solid 2px #a6bb54;
}

#container .navigationContainer .navigation li.about a,
#container .navigationContainer .navigation li .about a:link,
#container .navigationContainer .navigation li .about a:active,
#container .navigationContainer .navigation li .about a:visited
{
    color: #a6bb54;
    text-decoration: none;
    width: 156px;
}

#container .navigationContainer .navigation li .about a:hover
{
    color: #373431;
    border-top: solid 2px #373431;
}
#container .navigationContainer .navigation li.portfolio
{
    margin: 0 0 0 26px;
    padding: 12px 0 0 0;
    width: 156px;
    display: inline;
    float: left;
    font: normal .75em "Times New Roman", Times, serif;
    color: #df3f89;
    border-top: solid 2px #df3f89;
}

#container .navigationContainer .navigation li.portfolio a,
#container .navigationContainer .navigation li .portfolio a:link,
#container .navigationContainer .navigation li .portfolio a:active,
#container .navigationContainer .navigation li .portfolio a:visited
{
    color: #df3f89;
    text-decoration: none;
    width: 156px;
}

#container .navigationContainer .navigation li .portfolio a:hover
{
    color: #373431;
    border-top: solid 2px #373431;
}
#container .navigationContainer .navigation .active
{
    margin: 0 0 0 26px;
    padding: 12px 0 0 0;
    width: 156px;
    display: inline;
    float: left;
    font: normal .75em "Times New Roman", Times, serif;
    color: #373431;
    border-top: solid 2px #373431;
}

#container .navigationContainer .navigation .active a,
#container .navigationContainer .navigation .active a:link,
#container .navigationContainer .navigation .active a:active,
#container .navigationContainer .navigation .active a:visited
{
    color: #373431;
    text-decoration: none;

编辑：

html代码：

<div class="navigation">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li class="about"><a href="about.html">About</a></li>
        <li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
      </ul>
    </div>
4

5 回答 5

1

你可以只写a:hoveror.about a:hover而不是#container .navigationContainer .navigation li.about a:hover

a:hover
{
    color: #373431;
    border-top: solid 2px #373431;
}

演示

于 2013-03-11T11:43:43.413 回答
1

您可以将块设置为<a>可能有效的元素。

a{display: block;}
于 2013-03-11T12:04:37.827 回答
1

认为这可能是您正在寻找的。

我也清理了你的 HTML/CSS（希望你不介意！）

  <div class="navigation">
    <ul>
      <li class="nav-item home"><a href="index.html">Home</a></li>
      <li class="nav-item about"><a href="about.html">About</a></li>
      <li class="nav-item portfolio"><a href="portfolio.html">Portfolio</a></li>
    </ul>
  </div>

http://jsfiddle.net/LNkNL/

看看上面的小提琴。

于 2013-03-11T12:22:45.493 回答
1

我注意到您对<a>标签的引用不一致。

#container .navigationContainer .navigation li.portfolio a,
#container .navigationContainer .navigation li .portfolio a:link,
#container .navigationContainer .navigation li .portfolio a:active,
#container .navigationContainer .navigation li .portfolio a:visited
#container .navigationContainer .navigation li .portfolio a:hover

应该是

#container .navigationContainer .navigation li.portfolio a,
#container .navigationContainer .navigation li.portfolio a:link,
#container .navigationContainer .navigation li.portfolio a:active,
#container .navigationContainer .navigation li.portfolio a:visited
#container .navigationContainer .navigation li.portfolio a:hover

IE。<li>有portfolio课。这可以解释为什么悬停不起作用。

于 2013-03-11T09:50:30.823 回答
0

注意：我特别相信不要重新编写原始海报的代码，而是提供有关如何实现所需解决方案的一般示例和指南，即：

有很多方法可以实现悬停行为，也许最简单的方法是在 CSS 中简单地实现它。

这是一个带有 CSS 样式块的简单 HTML 页面，它定义了一个名为的类.menu-item并指定该类的悬停行为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* General body styles: */
        body {
            text-align: center;
            vertical-align: middle;
            font-family: verdana, arial, helvetica;
            font-size: 14px;
        }
        /* menu item class: */
        .menu-item {
            width: 180px;
            margin-left:12px;
        }
        /* menu item hover behavior: */
        .menu-item:hover {
            border-bottom: 5px;
            border-left: 0px;
            border-right: 0px;
            border-top: 0px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>
<body>
    <!--    
    Specify the menu-item class on a set of  
    span elements to comprise the menu items: 
    -->
    <span class='menu-item'>Item 1</span><span class='menu-item'>Item 2</span><span class='menu-item'>Item 3</span>
</body>
</html>

我span在这里为菜单项使用了元素，但您也可以轻松地定义一些div带有inline-block样式的元素。

在此处查看一个工作示例：

http://conversiondynamics.com/hovertest.html

干杯，
-=卡梅伦

于 2017-09-17T17:36:24.110 回答