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>済みます。

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

あなたはただ書くa:hoverか、.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>タグを参照していないことに気づきました。

#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クラスがあります。これは、ホバーが機能しない理由を説明します。

于 2013-03-11T09:50:30.823 に答える
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 に答える
0

注：私は、元のポスターのコードを具体的に書き直すのではなく、目的のソリューションを実現するための一般的な例とガイドラインを提供することを信じています。

ホバー動作を行う方法はたくさんありますが、おそらく最も簡単なのは、CSSに実装することです。

これは、呼び出されるクラスを定義し、.menu-itemそのクラスのホバー動作を指定するCSSスタイルブロックを含む単純なHTMLページです。

<!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簡単に定義することもできます。divinline-block

ここで実際の例を参照してください。

http://conversiondynamics.com/hovertest.html

乾杯、
-=キャメロン

于 2017-09-17T17:36:24.110 に答える