0

私が構築しているウェブサイトにタブ付きの外観を追加したかった. すでにそれを行っていますが、現在のタブに応じてタブの色を変更したいのですが、これも色を除いて問題ありませんでした。

コードはメニューのデフォルトの背景色も使用しているようです。

私のメニューは次の中に含まれています：

#container #menu ul li {
background: rgba(0, 0, 0, 0.8);
float: left;
position: relative;
list-style-type: none;
}

.onlink クラスを作成して現在のページを特定し、これを使用して正しい色を表示します。

#container #menu ul li a.onlink{
background-color: rgba(255, 255, 255, 0.9);
color:#000;
background: rgba(255, 255, 255, 0.9);
}
#container #menu ul li a.onlink:hover{
background: rgba(255, 255, 255,0);
}

メニューバーにカーソルを合わせると色は正しいのですが、カーソルを合わせていないときは色が少しずれており (灰色)、#container #menu ul li id のアーティファクトのようです。

ホバリングしない色を調整する方法について何か提案はありますか?

4

3 に答える 3

0

その外観から (完全にはわかりませんが)、部分的に透明な白い背景色ではなく、透明な背景色が必要なようです。その場合：

#container #menu ul li a.onlink {
    background-color: transparent;
    color:#000;
    background: rgba(255, 255, 255, 0.9);
}
#container #menu ul li a.onlink:hover {
    background-color: transparent;
}

background-color 上記は、もちろん、ホバー状態と非ホバー状態の間に違いがないことを意味するため、:hoverルール (2 番目) はスタイルシートから完全に省略できます (background-colorそのセレクターに含まれる唯一のプロパティであると仮定します)。与えるだけ:

#container #menu ul li a.onlink {
    background-color: transparent;
    color:#000;
    background: rgba(255, 255, 255, 0.9);
}

もちろん、色の表記をそのままにして、 (90% 不透明/ほぼ完全に見える) の代わりにrgba()、単純にアルファ (4 つの数値の 4 番目 (他はそれぞれ赤、緑、青) を(完全に透明) に保つこともできます。 )):00.9

#container #menu ul li a.onlink{
    background: rgba(255,255,255,0);
    color:#000;
    background: rgba(255, 255, 255, 0.9);
}
于 2013-09-12T22:08:04.507 に答える