How not to override property in CSS

i'm a beginner in HTML and CSS , i've set :hover pseudo class to all anchor tags in my site with background-color , but at a portion of my site , i need to have a background-image in :hover as well as the background-color.

But unfortunately the :hover class of that portion (background-image) is overriding the background-color, how to set both b开发者_StackOverflow社区ackground-color and background-image without anyone overriding the other, so i get the global background-color with background-image in front of it?

Of course without writing a special :hover in that portion with background-color & image combined ?

---

Specificity and the cascade are your friends. Your CSS rules for your anchors can be structured something like the following (use a class or ID to denote that specific portion of your site):

a:hover {
    background-color: red;
}

.some-portion a:hover {
    background-image: url(yourimg.png);
}

The second rule should still apply your background color because the color applies to any anchor on hover.

---

you can try using !important http://www.w3.org/TR/CSS2/cascade.html#important-rules, of course it would be helpful to see some example of how you are using it to give you more precise answer

---

Add a class or id to your anchor that you want to be different.

<a id="differentTag" href="#">Link</a>

Then in your CSS...

#differentTag:hover {
    background-image: url(...);
    background-color: #000;
}

Hope that helps