css - jQuery toggle colors of element on hover -


i have 2 words within div. 1 of words black, other grey. when hover on words, i'd colors swap on , again when hover out.

so far here html markup:

<div class="splash_logo">     <span class="paul">paul</span><span class="jones">jones.</span> </div> 

and css:

.splash_logo { position:relative; font-family: helvetica,helvetica neue,arial,sans-serif; font-weight:bold; font-size:100px; float:right; margin-top:110px; } span.paul { color:#222222; } span.jones { color:#dedede; } 

and jquery hover event:

$(".splash_logo").hover(function(){     $('span.paul').css("color", "#dedede");     $('span.jones').css("color", "#222222"); }); 

this change colours when hover over, however, how can them change when hover out?

use :hover - css

demo:

span.paul:hover { color:#dedede; } span.jones:hover { color:#222222; } 

update:

.splash_logo:hover span.paul { color:#dedede; } .splash_logo:hover span.jones { color:#222222; } 

demo:


Comments

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

android - Associate same looper with different threads -

visual studio 2010 - Connect to informix database windows form application -