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

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

2 个答案: