CSS Image Hover Help

[alanaburton]

Hi,

I am building the following site in a test environment: http://192.185.27.6/~natalie/

I have added to the CSS to get the social media icons in the menu to the right hand side as follows:

.css-facebook{
text-indent: -9999px;
background-image: url(http://192.185.27.6/~natalie/wp-content/uploads/2013/11/facebook-square.jpg) !important;
background-repeat: no-repeat !important;
margin-left: 350px !important;
width: 50px;
}

.menu-twitter{
text-indent: -9999px;
background-image: url(http://192.185.27.6/~natalie/wp-content/uploads/2013/11/twitter-square.jpg) !important;
background-repeat: no-repeat !important;
margin-left: 10px !important;
width: 50px;
}

But the menu already has a hover background colour set in a CSS section above these entries. How can I override that bit of CSS for the social media icons so that they show a second image on hover with no background colour.
I have a slightly larger duplicate image that I'd like to show on hover which is facebook-square-2.jpg and twitter-square-2.jpg.

Thanks!

http://192.185.27.6/~natalie/

[nutsandbolts]

I was able to use a different background color/image in Firebug by adding something like this:

.css-facebook a:hover {
    background: #000;
}

If the menu hover is still overriding it, you may need to add !important.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[alanaburton]

Thank you!

I have used your suggestion and added some to get:

.css-facebook a:hover {
background-image: url(http://192.185.27.6/~natalie/wp-content/uploads/2013/12/facebook-square-2.jpg) !important;
background-repeat: no-repeat !important;
background-color: #fff; !important;
}

I just couldn't work out the .css a:hover bit & was trying .css-facebook .a hover etc. type thing, almost but not quite!

It's still not perfect as there's still a flash of pink when you hover over but at least the icon is also now bigger on hover and you can see it so that's a step in the right direction!

Thanks again 🙂

[Author]

Posts