如何設置按鈕上的懸停方式？

這是HTML：如何設置按鈕上的懸停方式？

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

}

我想只要給它一個簡單的懸停顏色：

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

按鈕的樣式

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

我在做什麼錯誤？

來源

2014-04-07 Shinji

你正試圖給id而不是類的懸停風格。嘗試給行a.navButton：懸停 –

sry。你正試圖給id而不是class的懸停風格。嘗試給*像a.navButton：懸停 –

您可以通過using #navButton:hover了你的CSS。

您應該使用一個類.navButton:hover

這裏是小提琴：Fiddle

注：

如果您使用的使用ID它#navButton:hover呼叫，否則，如果您使用的是.navButton:hover你應該用class來調用它。

來源

2014-04-07 11:01:58

由於某種原因，它仍然無法正常工作。我認爲這可能是因爲div的風格？ – Shinji

是的，您可能已經在任何div中提供了其他一些樣式。您應將其移除以使其正常工作。 –

沒關係。它現在有效。謝謝！ – Shinji

您已經使用散列而不是句點/句號

#navButton:hover

應該

.navButton:hover

來源

2014-04-07 10:58:32

它仍然無法正常工作。我的語法是否正確？ – Shinji

應該是：

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

來源

2014-04-07 10:58:58

如何設置按鈕上的懸停方式？

回答

相關問題