HTML CSS Buttons Hover Wont Work Through Class

10,912

Using id and it works so sure something has to do with the specificity, over riding, try this

Demo

Demo + !important

.button:hover { 
    font-size:17px !important; /* Actually you don't even need !important */
}
Share:
10,912

Related videos on Youtube

user1880779
Author by

user1880779

Updated on September 16, 2022

Comments

  • user1880779
    user1880779 about 1 year

    I don't understand why does this work :

    .button:active {
        position:relative;
        top: 2px;
        left:2px;
    }
    

    But this wont work :

    .button:hover { 
        font-size:17px;
    }
    

    It works when I use id but I want it to activate for all buttons :

    #btnhome:hover{
        font-size:17px;
    }
    

    This works fine but with class it wont? What am I doing wrong?

    • Madara's Ghost
      Madara's Ghost almost 11 years
      Works fine for me. Please include a full test-case over on jsfiddle.net showing what doesn't work for you exactly.
  • user1880779
    user1880779 almost 11 years
    Yes it works now (only with !important). What could be over riding it I don't understand? Can you maybe explain? Where can I find the over-rider? :)
  • Mr. Alien
    Mr. Alien almost 11 years
    @user1880779 I can't unless and until I see your CSS, paste it in a fiddle and share a link :)
  • user1880779
    user1880779 almost 11 years
    Can't you just blind shoot? :) What could it be? Something obvious?
  • Mr. Alien
    Mr. Alien almost 11 years
    blind shoot lol no...but I can you tell something like div.container ul li input[type=button].button:hover is much more specific than .button:hover
  • Belyash
    Belyash almost 11 years
    Don't use ID for add style! Use class.
  • user1880779
    user1880779 almost 11 years
    @Belyash I need to use both because I have 4 buttons and I have styles that apply to all of them and some styles are different for each so I just use class for same styles and if some are different i add id too.
  • DA.
    DA. almost 11 years
    We could certainly blind shoot but it'd probably be more useful for you to fire up FireBug in Firefox or DevTools in Chrome and have it show you exactly what's over-riding it for you.
  • Mr. Alien
    Mr. Alien almost 11 years
    @Belyash seriously? Any reason?
  • DA.
    DA. almost 11 years
    Note that IDs are more specific than classes, so your 'just add ID too' might work for you, but note that there are drawbacks (namely your style declaration with an ID is likely going to over-ride subsequent styles just using classes.
  • user1880779
    user1880779 almost 11 years
    Yes there is only one .css file included '<link rel="stylesheet" href="default.css" />' But this is the one in which im defining it all and it doesn't have that line you posted...? The only !important tag is the one I just added so it would work.
  • DA.
    DA. almost 11 years
    Final thought: If you find yourself using !important more than a few times, it's a sign that your CSS selectors have gotten a bit too specific in general. Might be time to step back and rethink a few things
  • user1880779
    user1880779 almost 11 years
    @DA This would be my first !important, I didn't even know about it before.
  • user1880779
    user1880779 almost 11 years
    @Mr.Alien Would only CSS file without html be enough for you to see an answer?
  • macio.Jun
    macio.Jun almost 11 years
    Then is there any code like button:hover{font-size:somethingelse;} defined after your new css code, because all the css selector before your new css selector will be overriden by the new selector.
  • user1880779
    user1880779 almost 11 years
    I don't understand because this is the only :hover style I'm using in my whole CSS. Nothing should be overiding it.
  • macio.Jun
    macio.Jun almost 11 years
    Or is there any internal style sheet defined? If yes, please check, because :hover can't be defined via using inline style.
  • user1880779
    user1880779 almost 11 years
    No, I don't have any internal style sheet defined. This is the only style sheet I have and the only one I'm using/defining. I don't know whats wrong.
  • user1880779
    user1880779 almost 11 years
    It works only because I gave it !important tag, without it, doesn't work.
  • Mr. Alien
    Mr. Alien almost 11 years
    @user1880779 Got it, you are using ID and a class together, id is more specific than class..learn specificity jsfiddle.net/mMF5r/14
  • user1880779
    user1880779 almost 11 years
    I don't get it? But I need to use them both for properties that are the same and for the ones that are different/specific. stackoverflow.com/questions/4371733/… You removed the id for btncontact and now its working only on contact button im confused.
  • Mr. Alien
    Mr. Alien almost 11 years
    @user1880779 is just the specificity issue, see check this demo jsfiddle.net/mMF5r/16 #btnhome:hover, #btnabout:hover, #btncontact:hover { font-size:17px; }
  • user1880779
    user1880779 almost 11 years
    So basically you think this is the only way to fix it? If so, ok.
  • Mr. Alien
    Mr. Alien almost 11 years
    @user1880779 ya it's completely fine, you are not using any hacks