CODEWITHSUNDEEP
htmlcss
Stanimirovv
Stanimirovv

Reputation: 3172

Changing button color on hover

Good day! I realise that this question has been asked several times. I looked up some threads here but they didn't seem to be enough so I decided to create a new thread. Long story short this is my second day learning HTML5, CSS3 and javascript. I am at the point where I want to create menus with shiny buttons.

The case here is the following: The buttons show as they should, howver when the mouse hovers over them the color isn't changed. I will post the entire source code. There are a few comments inside to help understand the code better.

The entire source code:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
<style>

     ul {
      list-style: none;  
        margin: 40px 0;
    }
    li {
        float : left;

        }
    /*This will style the buttons*/
    .buttonStyle {
        width : 60px;
        height : 20px;
       -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        }
    /*This should make them change their color when they are hovered*/
    a.buttonStyle:hover {
         background: #383;
    }
</style>
</head>
<body>
    <!-- custom made list to store the buttons-->
    <ul >
        <!-- Just some buttons to make it look like a menu-->
        <li><input type="button" class="buttonStyle" /></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
    </ul>
</body>
</html>

Upvotes: 2

Views: 45767

Answers (2)

char
char

Reputation: 11

You could also use a tint for the hover, so instead of a new colour you would have a tinted or darken version of the colour. This is useful if using the hover style across a number of different coloured buttons hence only one hover style but any number of button colours.

.button .style1 { background: #383; } .button .style2 { background: #555; }

.button:hover { filter: brightness(85%); }

Upvotes: 0

Ryan
Ryan

Reputation: 28247

Your hover style looks like this:

a.buttonStyle:hover { background: #383; }

So it is set specifically for a <a> tag. Change your style to be

.buttonStyle:hover { background: #383; }

So you set the hover only on the specific class. Then it works.

See this jsFiddle for a demo.

Upvotes: 4

Related Questions