css - 2 つの異なる単語を異なる色で作成し、1 つの div で同じ色に変更するにはどうすればよいですか?

Question

誰でもこれで私を助けることができますか? div があり、div 内には画像と 2 つの異なるテキストがあります。div全体がリンクですが、divを通過して両方のテキストが白に変わると、2つの単語を異なる色にしたいと思います。

Answer 1

あなたはコードを与えなかったHTMLので、単なるアイデアです（jqueryを使用）

HTML

<div id="myDiv">
    <img src="http://gpsarakis.com/images/icon_jquery.png" />
    Hello World
</div>​

JS

$(function(){
    var myDiv=$('#myDiv');
    var txt=myDiv.text().split(' ');
    var theWord=txt[txt.length-1];
    myDiv.html(myDiv.html().replace(theWord, '<span class="red">'+theWord+'</span>'));

    myDiv.hover(function(e){
        $(this).css('color','white').find('span.red').toggleClass('white');
    },
    function(e){
        $(this).css('color','black').find('span.white').toggleClass('white');
    });
});​

デモ。

Answer 2

そのために JS を使用したくない場合は、次のようなことができます: たとえば、あなたの HTML:

<div>
    <img src='...' alt=''/>
    <span class='first'>Your text</span>
    <span class='second'>Your second text</span>
</div>

およびスタイル:

div:hover {
    color: white;
}

div:hover .first {
      background: red;
}
div:hover .second {
      background: yellow;
}

その利点は、スパンに複数の単語を含めることができることです。@Sheikh は、あなたの質問へのコメントでそのようなことを提案しました。