How to get 'hover' and 'active' states working with CSS and HTML?


Tags: html,css,button,hover

Problem :

I have 3 menu items in a header at the top of my website (it's not live at the moment so I can't provide a link - sorry). The 3 'buttons' are not buttons in the CSS buttons sense - they're text rendered to images (Not ideal, I know but they look pretty, so...).

Anyway, each image contains differing versions: 1 for the default appearance, 1 for mouseover and another for onclick/active. The html and CSS I'm using so far looks like this:

HTML

<li>
    <a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
    <a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
    <a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About {background: url(../Buttons/About.png) no-repeat 0 0; width: 87px;}
#Services {background: url(../Buttons/Services.png) no-repeat 0 0; width: 112px;}
#Contact {background: url(../Buttons/Contact.png) no-repeat 0 0; width: 117px;}
a.button {height: 20px; display: inline-block;}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

For one reason or another, the 'hover' and 'active' states are having no effect. I note that if I define classes for each of the buttons instead of id's, it works fine - but this makes no sense to me. The buttons each have their own image and widths and so are unique (which is why I've given them id's rather than classes).

Can anyone explain where I'm going wrong? I'm new to all this so any explanations will need to be in laymen's terms.



Solution :

The problem is that your ID selectors are more specific than your class + pseudoselector combination. But if you don't specify the position in the ID selector, you'll be fine. EG:

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

    CSS Howto..

    Toggle radio button on javascript hide/show of div

    How do I align an icon right next to “Click here”?

    How to position the twitter widget

    How to get a button to fill the full width of the footer in Mobile View?

    How to make headers glossy in IE7,8,9 using CSS

    How to create a table with CSS [closed]

    How to indent items of a sublist using css and html in wordpress

    how to make vertical progress path using css

    how to add a css style property dynamically in JSF

    How to set css style dynamically with angularjs?

    How to get the “true” computed CSS width in Chrome / IE

    CSS: how to make two sections at the same line?

    How to fill an element 100% vertically with children only with CSS?

    CSS - How do I center a loading icon on a page that contains an iframe?

    How to Inherit grandparent CSS not parent?

    How to get dropdown menus to align with the correct menu tab

    How to make a scrolling website mobile friendly?

    How to align arrows using CSS or jQuery or JavaScript [closed]

    How to create a CSS style which override another CSS style

    How can i get List items to stay together using CSS?

    how to select all list items except for the first and last using CSS only?

    How to allow scroll on mobile

    How to cancel bootstrap CSS left?

    With css, how to ensure wrap on span boundary?

    How to stretch a background-image with css

    How to position two divs on the absolute front of a page, but with one over the other? CSS

    How to make selected file name visible?

    Dynamic HTML 3 layers nested quotes - how to do?

    How to translate this Silverlight control into HTML/CSS/JS

    HTML/CSS - how to align boxes / divs [closed]