0

メニューバーを開発しています。完了しましたが、ホバーアクションを残しました。メニューの背景全体を変更したいのですが、メニューの背景はテキストの後ろでしか変わりません。

これがフィドルです。

<div class="nav">
    <ul>
        <li ><a href="#">Zardari</a></li>
        <li><a href="#">Kutta</a></li>
    </ul>
</div>​

これがcssです。

.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px;   padding-left:10px;}

.nav a{
    color:#fff;text-decoration:none;
    font-style:italic;
    margin-right:10px;
}

    .nav i{position:relative;top:-3px}
    .nav li{float:left;overflow:hidden}
    .nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
    .nav .active{background:#454545}
    .nav ul a:hover{
            color:#FFF;
            background:#000;            

    }
​

前もって感謝します。

4

3 に答える 3

2

ではなく、タグにpadding:10px付けてください。このようにして、リンク領域全体の色を上から下に変更します。（あなたもあなたに追加する必要があります。a.navdisplay: block;a

.nav a{
  color:#fff;
  text-decoration:none;
  font-style:italic;
  margin-right:10px;
  padding:10px;
  display: block;
}

フィドル

于 2012-12-28T15:37:59.907 に答える
1

Jqueryを使用して、あなたが望むものを達成したと思います。Jqueryで実装した背景を変更しようとする試みを削除するためにcssを編集しました。

CSS:

.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px;   padding-left:10px;}

.nav a{
    color:#fff;text-decoration:none;
    font-style:italic;
    margin-right:10px;
}

    .nav i{position:relative;top:-3px}
    .nav li{float:left;overflow:hidden}
    .nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
    .nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}​

次に、headhtml ファイルに Jquery ライブラリを含めます。次のように、ダウンロードしてサーバーにホストするか、ライブラリに Google の CDN を使用できます。

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

HTMLbodyに、私がコーディングした jquery 関数を追加します。

$("li").mouseover(function () {
    $(".nav").css("background-color","#000");
});

$("li").mouseout(function () {
    $(".nav").css("background-color","#454545");
});

li（各ボタン）にマウスを乗せるとナビゲーションバーの背景が変わります。これがあなたの望むものなら大丈夫です。違うものが欲しいなら、私に知らせてください。変更します。

ここでは、 jsfiddleの DEMO を見つけることができます

于 2012-12-28T15:51:56.863 に答える
0

これはどうですか？

.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px;   padding-left:10px;}

.nav a{
color:#fff;text-decoration:none;
font-style:italic;
margin-right:10px;
} 

.nav i{position:relative;top:-3px}
.nav li{float:left;overflow:hidden}
.nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
.nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}
.nav .item:hover{background:#454545;color:#FFF}
.nav .active{background:#454545}
.nav:hover{
        color:#FFF;
        background:#000;            

}

</p>

于 2012-12-28T15:28:53.327 に答える