0

私の問題は、リンクにカーソルを合わせると、希望どおりに背景が変わることです。ただし、次のリンクに移動すると、その状態が維持され、最後のリンクに移動すると、すべてのリンクがホバーしているように見えます。しかし、リンクからマウスを外すと、すべて正常に戻ります。それはステップシーケンスのようなものです。リンク1にカーソルを合わせると、リンク1のみが影響を受けます。リンク2がホバーされている場合、リンク2より上のものもホバーされ、リンク3についても同じです。リンク3より上のものはすべてホバーされます。個別にホバリングするようにこれを修正するにはどうすればよいですか？どんな助けでもありがたいです。ありがとう。これは私のCSSコードです：

#profilebarsectiondiv {
    width: 100%;
    background-color: #285059;
    font-family: sans-serif;
    font-weight: bold;
    color: #ffffff;
}

.profilebarlink{
    width: 100%;
    background-color: #dce8ea;
}

.profilebarlink a{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 8;
    text-decoration: none;
    color: #206676;
}

.profilebarlink:hover{
    background-color: #e67e17;
}

そして私のHTML

<div id="profilebarsectiondiv">Dashboard</div>
<div class="profilebarlink"><a href="#">Home</a>
<div class="profilebarlink"><a href="#">Profile</a>
<div class="profilebarlink"><a href="#">Contacts</a>
4

4 に答える 4

2

<div>タグを閉じる必要があります

<div id="profilebarsectiondiv">Dashboard</div>
<div class="profilebarlink"><a href="#">Home</a></div>
<div class="profilebarlink"><a href="#">Profile</a></div>
<div class="profilebarlink"><a href="#">Contacts</a></div>
于 2012-05-18T03:52:35.563 に答える
1

<div>すべてのタグを閉じる必要があります。そして、あなたはでホバースタイルに適用していました<div class="profilebarlink">。しかし、この方法は効率的ではありません。

コードの修正と改善を加えて、このデモを確認してください。

HTML

<div id="profilebarsectiondiv">Dashboard</div>
<a href="#" class="profilebarlink">Home</a>
<a href="#" class="profilebarlink">Profile</a>
<a href="#" class="profilebarlink">Contacts</a>​

CSS

#profilebarsectiondiv {
    background-color: #285059;
    font-family: sans-serif;
    font-weight: bold;
    color: #ffffff;
}

.profilebarlink{
    display: block;
    background-color: #dce8ea;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 8;
    text-decoration: none;
    color: #206676;
}

.profilebarlink:hover{
    background-color: #e67e17;
}​
于 2012-05-18T04:00:54.030 に答える
0

正しいHTML

<div id="profilebarsectiondiv">Dashboard</div>
<div class="profilebarlink"><a href="#">Home</a></div>
<div class="profilebarlink"><a href="#">Profile</a></div>
<div class="profilebarlink"><a href="#">Contacts</a></div>

Divには終了タグも必要です

于 2012-05-18T03:52:47.370 に答える
0 
<div id="profilebarsectiondiv">Dashboard</div>
<div class="profilebarlink"><a href="#">Home</a></div>
<div class="profilebarlink"><a href="#">Profile</a></div>
<div class="profilebarlink"><a href="#">Contacts</a></div>

divタグを閉じてください:)、それは間違いなく機能します

于 2012-05-18T04:39:44.137 に答える