css - 如何用不同颜色制作两个不同的单词，在一个 div 中更改为相同的颜色？

Question

谁能帮我这个？我有一个 div，在 div 里面有一个图像和两个不同的文本。整个 div 是一个链接，但是当我越过 div 并且两个文本都变为白色时，我想让这两个单词具有不同的颜色。

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 在评论您的问题时向您提出了类似的建议。