如何将鼠标悬停在按钮上？

Question

这是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>

按钮的样式：

#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;

}

我试图给它一个简单的悬停颜色：

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

我做错了什么？

Answer 1

您使用的是hash而不是句点/ fullstop

#navButton:hover

应该是

.navButton:hover

Answer 2

你有using #navButton:hover的css。

您应该使用课程.navButton:hover

这是小提琴：Fiddle

注意：

如果您使用#navButton:hover使用ID调用它，否则如果您使用.navButton:hover，则应使用类调用它。

Answer 3

应该是：

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