CODEWITHSUNDEEP
cssbackgroundoverriding
rafael
rafael

Reputation: 687

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 background-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 ?

Upvotes: 2

Views: 4639

Answers (3)

BoltClock
BoltClock

Reputation: 723568

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.

Upvotes: 1

SkylarSch
SkylarSch

Reputation: 389

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

Upvotes: 0

Kris Ivanov
Kris Ivanov

Reputation: 10598

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

Upvotes: 1

Related Questions