csshover

:hover does not seem to be working on custom buttons

I have a couple custom buttons that are working and look fine, except the hover stopped working (should change color on hover. It worked when I first coded but at some point it stopped. I am not sure when it stopped, or why. It is not working in either chrome, firefox or IE8. Obviously I have messed something up but I have yet to find it. I will keep looking and researching, but if you have any ideas, much appreciated.

html:

<input class="left-menu-button" type="button" value="Search" />
<input class="left-menu-button" type="button" value="View Detail" />

css:

.left-menu-button
{
    width: 200px;
    height: 60px;
    color: #fff;
    background-color: #631127;
    border: none;
    margin: 20px 40px 0 0;
    font-size: 1.2em;
    float: right;
}

.left-menu-button:hover
 {
       background-color: #A3143A !important;
 }
Solution

  • 1) Open your page in Google Chrome;
    2) Press F12 for "Developer Tools" to open;
    3) Select your problematic input;
    4) On the right you have the applied styles;
    5) On the "Styles" tab, click on the 2nd icon, a cursor inside a dotted rectangle;
    6) Select ":hover", so that you can see what's happening when your input is being hovered and find the problem!