Question

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

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

    #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>

Answer 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

即。 <li>有portfolio个班级。这可以解释为什么悬停不起作用。

Answer 2

您只需撰写a:hover或.about a:hover代替#container .navigationContainer .navigation li.about a:hover

即可

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

<强> DEMO

Answer 3

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

a{display: block;}

Answer 4

认为这可能是你正在寻找的东西。

我已经清理了你的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/

看看上面的小提琴。

Answer 5

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

有许多方法可以做悬停行为，也许最简单的方法是在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

干杯，
- =卡梅伦

导航菜单鼠标悬停不起作用

5 个答案: