如何讓兩個不同顏色的單詞在一個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在你的問題中提出你的評論。