:hover does not seem to be working on custom buttons
css, hover
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!
Problem
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; } ```