How can I use :hover with multiple classes


Tags: html,css,css-selectors

Problem :

I've got a css buttons style and some predefined colour styles. I use colour classes to colour things the same colour and a button style to make the buttons round.

How do I add a hover style to my buttons to change the colour to a lighter shade? I thought it would be as simple as .class class2:hover {etc} but it doesn't work for some reason.

Here's a fiddle I prepared to demonstrate: http://jsfiddle.net/7n4Wy/

HTML

<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>

CSS

.red {
    background: red;
}

.blue {
    background: blue;    
}

.button {
    border-radius: 6px;
}

.button:hover .red:hover {
    background: pink;
}


Solution :

What you have is trying to match .red:hover that is inside .button:hover, which implies a nested element in your markup.

Since you're selecting the same element, you need to combine both classes with a single :hover:

.red.button:hover {
    background: pink;
}

Updated fiddle


    CSS Howto..

    How to write print css to get print from web pages in almost same manner as we get from MS word?

    How to re-render a page from a Google Chrome extension?

    How to overlay images with css (cross-browser)

    When using ''@keyframe play'' in css, how can you get the frame the animation is currently at with javascript?

    How are CSS elements combined

    How to get css properties set explicitly via the style attribute? [closed]

    How to apply text rotation in CSS?

    how to position heading in the center of the page

    How to == Model Method Class in Helper for CSS?

    how to set css and html in textarea [closed]

    CSS - how to avoid class= for every single paragraph?

    CSS - How do I get my list element to fill 100% of the block

    How do i make the header/footer extend width-wise to fit the screen, and the main content extend height-wise to fit the screen?

    How to control dojo widget classes, or how to get fine-grained control of style

    How to give different content to every td in the table

    Fixing my CSS: How to get the lists and titles to work?

    How to make CSS border-image work

    How to add custom CSS class name in PHP?

    How can I fix this Bootstrap layout issue?

    Boostrap: How to “stick” a button over an image when re-sizing

    How to make a HTML element fill a dynamically sized container using CSS

    how do i change a div background when you hover over a button in another div?

    How to keep div same height at all times

    how to apply css on dynamic loaded html content (jquery mobile+backbone+phonegap)

    How do I make a (mock) bank system? [closed]

    CSS - How to make a div's padding not affect the positioning of the div below it

    How to resize and float right a background image using css?

    How do I add an image to a progress bar in HTML/CSS?

    How to give all divs same amount of space on each side

    How to make 1 image tile in css?