2011-02-11 6 views
0

私は別の質問から次のCSSいます変更HTMLテキストは2

<div class="container"> 
    <a href="#" class="title">Title</a> 
    <span class="username">username</span> 
    <span class="dateandtime">date and time</span> 
</div> 
これは、限り、私は次のHTMLを持っているとうまく動作

.title {color:#707070;} 
.username {color:#8DAAB8;} 
.dateandtime {color:#A5A7AC;} 

.container:hover .title { color: #000000; } 
.container:hover .username { color: #DF821B; } 
.container:hover .dateandtime { color: #3185B6; } 

(以下では単に抜粋です)

個々のコンテナではどのように動作させるのですか? htmlはserversideコードを介して動的に生成されます。例えば

:私はこれらのコンテナのいずれかの上にマウスを置く場合は、上記のCSSを使用し

<div class="container"> 
    <a href="#" class="title">Title1</a> 
    <span class="username">username1</span> 
    <span class="dateandtime">date and time1</span> 
</div> 

<div class="container"> 
    <a href="#" class="title">Title2</a> 
    <span class="username">username2</span> 
    <span class="dateandtime">date and time2</span> 
</div> 

<div class="container"> 
    <a href="#" class="title">Title3</a> 
    <span class="username">username3</span> 
    <span class="dateandtime">date and time3</span> 
</div> 

<div class="container"> 
    <a href="#" class="title">Title4</a> 
    <span class="username">username4</span> 
    <span class="dateandtime">date and time4</span> 
</div> 

は、それがすべてのコンテナの色を変えてしまいます。それは、上に乗っているコンテナ内のアイテムの色を変更する必要があります。

どうすればいいですか?

+1

これは奇妙なことですが、すべてのコンテナの色を変更するべきではありません。実例がありますか? – BoltClock

+2

[あなたのコードは正常に動作します](http://jsfiddle.net/SLaks/dNdFp/)。 – SLaks

答えて

2

あなたのコード(は質問に示されています)はうまくいくはずです。

ほとんどの場合、containerクラスのすべてをラップしている別のdivがあります。あなたのコードは、「罰金」動作しますが、あなたの作業コードがhttp://jsfiddle.net/2TnKr/

+0

それでした。 divラッピング問題。ありがとう。 – oshirowanen

1

うんで暮らす

同じ効果を持っているでしょうDIVを閉め忘れ)。アンカータグではないHTMLエンティティにカーソルを合わせると、ブラウザごとに大きく異なることに注意してください。

関連する問題