Question

Can Anyone help me with this? I have a div, inside the div there is an image and two different text. The whole div is a link but I want to make the two word with different colors when I go over the div and both text change to white.

Answer 1

页: 1 页: 1 守则只是一个想法(使用jquery)

<><><><>>><>>>>><>>>>>>>

<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

If You don t want to use JS for that then You can do something like this: for example Your HTML:

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

and styles:

div:hover {
    color: white;
}

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

这样做的好处是,你可以有多个字眼。建议你在评论你的问题时也这样做。

友情链接