Question

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 ?

Answer 1

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.