CODEWITHSUNDEEP
htmlcss
Shinji
Shinji

Reputation: 1839

How to style the hover on a button?

This is the HTML:

<div id="navigationBar"><a href=""><input type="Submit" value="Home" class="navButton"/></a>
                    <a href=""><input type="Submit" value="Users" class="navButton"/></a>
                    <a href=""><input type="Submit" value="Administrator's Tools" class="navButton"/></a>
                    <a href=""><input type="Submit" value="Search" class="navButton"/></a>

The style of the button:

#wrapper #navigationBar a .navButton { /* Navigation Bar Buttons */
    background-color: Transparent;
    background-repeat:no-repeat;
    border: 1px;
    border-color: black;
    cursor:pointer;
    overflow: hidden;
    width: 180px;
    height: 55px;
    font-family: Gisha;
    font-size: 18px;
    color: black;
    outline: none;

}

I am trying to just give it a simple hover color:

#navButton:hover{
background-color: grey;
color: white;
}

What am I doing wrong?

Upvotes: 0

Views: 127

Answers (3)

Sulthan Allaudeen
Sulthan Allaudeen

Reputation: 11310

You had your css by using #navButton:hover.

You should use a class .navButton:hover

Here is the Fiddle : Fiddle

Note :

If you are using #navButton:hover call it using id, else if you are using .navButton:hover you should call it using class.

Upvotes: 1

Andrew Newby
Andrew Newby

Reputation: 5187

Should be:

.navButton:hover{
   background-color: grey;
   color: white;
}

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

You have used hash instead of a period/fullstop

#navButton:hover

should be

.navButton:hover

Upvotes: 2

Related Questions