How not to override property in CSS


Tags: css,background,override

Problem :

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 ?



Solution :

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.


    CSS Howto..

    How can i style textnodes that are direct children of a body-element?

    How to output CSS files to single directory from several input directories?

    How to turn off visjs active shadow box?

    How to apply my class from css to checkbox? [duplicate]

    How to keep layout unchanged when keyboard is displayed?

    HTML CSS Form - How to center the form on the page?

    How do I overwrite a CSS rule?

    How to get a website's position setup in a way that an image is centred?

    How to prevent specific css style sheet from styling a specific html tag

    How to absolute position imageless corners with css

    less: how to import multiple css?

    How to center a textarea using CSS?

    How to do a best fit vertical align

    How to remove hover effect from a column of a table

    How can I put three elements in the same column, with the first on top, second and third in the center of the remaining space, using Flexbox?

    If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

    How to select all elements after specific element in CSS

    Why does overflow hidden affect height and how can I fix it in this example?

    How to add image and change visibility on hover CSS

    How to apply style to the divs that are added dynamically?

    How to position the scaled elements (jQuery, css)

    How to apply css class to an html element using jquery in ASP .NET MVC?

    How can I force form elements to render the same across browsers?

    Leaflet for R: How to change default CSS cluster classes

    CSS: How to create vertical and horizontal grids on the same element?

    How can I turn the page's font color to green when a button is clicked

    Css Tricks - How to align 4 div's

    How to hover over the whole button in css

    How to animate selection / deselection in ace editor?

    How to add ::after in the HTML link tag