You can use CSS to do the trick, check out http://www.w3schools.com/cssref/sel_hover.asp
to get some idea of the hover selector and then you can add the css to your theme css or preferably to your child theme.
Thanks, but… I can’t find out what to change where…?
/* =Social Icons
-------------------------------------------------------------- */
#footer .social-icons {
list-style: none;
line-height: normal;
padding: 0;
margin: 0;
text-align: right;
}
#footer .yelp-icon,
#footer .vimeo-icon,
#footer .youtube-icon,
#footer .twitter-icon,
#footer .facebook-icon,
#footer .linkedin-icon,
#footer .rss-feed-icon,
#footer .instagram-icon,
#footer .pinterest-icon,
#footer .foursquare-icon,
#footer .google-plus-icon,
#footer .stumble-upon-icon {
display: inline;
margin: 1px;
padding-left: 3px;
}
Try this
.twitter-icon{
display: inline;
margin: 1px;
padding-left: 3px;
height:24px;
width:24px;
background:transparent url(‘twitterbird.png’) center top no-repeat;
}
.twittericon:hover {
background-image: url(‘twitterbird_hover.png’);
}
Thanks, it works just fine now, BUT BUT BUT – only underneath an icon I can’t controle…
I left the code in my child-theme, so you can see the effect.
#footer .twitter-icon{display: inline; margin: 1px; padding-left: 3px; height:24px; width:24px; background:transparent url('http://jeanjensen.dk/wp-content/themes/responsive-child/core/icons/twitter-icon.png') center top no-repeat;}
#footer .twitter-icon:hover {background-image: url('http://jeanjensen.dk/wp-content/themes/responsive-child/core/icons/twitter-icon-hover.png');}
you can remove the img in the html.
As per the theme developer’s request, please post in the theme’s dedicated forum: http://cyberchimps.com/forum/free/responsive/
A better Answer
add a class to the link
<a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>
remove the image as mentioned before
