如何让两个不同颜色的单词在一个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'); 
    }); 
});​ 

DEMO.

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在你的问题中提出你的评论。