導航與CSS的懸停效果

我想實現與菜單項的背景懸停效果，但與CSS我有東西似乎是不合適的。我已經嘗試過很多不同的東西，但仍然無法弄清楚如何在懸停時讓菜單項保持原位，也不要讓文本粘在底部的背景上。導航與CSS的懸停效果

http://youvisit.com/creative/FindYourFutureCampaign/html/

2013-01-14 kikix2125

您應該在您的問題中提供完整的示例代碼。 – matthewpavkov

問題是，通過添加左/右圖像（帶圓角的圖像），您正在更改<li>的寬度和高度。由於這些圖像的高度爲19px，因此您需要將<li>的高度設置爲19px。您可以使用line-height和height來做到這一點。做完之後，你必須弄清楚如何垂直對齊<a>中的文字。然後，您需要調整寬度的變化。您可以通過在<a>上使用左/右填充來完成此操作，然後刪除懸停時的填充（刪除的填充應等於左/右圖像的寬度）。

這應該讓你非常接近。我沒有在IE7/8中測試這個。

ul.menuItems li { 
    float: left; 
    height: 19px; 
    line-height: 19px; 
    margin-right: 20px; 
} 
ul.menuItems li a { 
    color: #000000; 
    display: block; 
    float: left; 
    height: 19px; 
    line-height: 19px; 
    padding: 0 2px; 
    text-decoration: none; 
} 
ul.menuItems li:hover a { 
    background: url("../img/menuHoverCenter.png") repeat-x 0 0; 
    padding: 0; 
} 
ul.menuItems li:hover:before { 
    content: url("../img/menuHoverLeft.png"); 
    float: left; 
} 
ul.menuItems li:hover:after { 
    content: url("../img/menuHoverRight.png"); 
    float: right; 
}

真的，這是一個糟糕的設計。您可能不需要在懸停上添加內容。如何使用CSS3 border-radius來獲得圓角。然後使用linear-gradient或背景圖片作爲背景。所有瀏覽器都不支持border-radius，但是如果您不擔心IE8和更低版本，它會得到很好的支持：http://caniuse.com/#search=border-radius

來源

2013-01-14 17:08:50 matthewpavkov

是的，我意識到css3將是一個簡單的解決方案，可以將圖片作爲背景替代，但問題是我的老闆會想要確保學校管理員能夠看到與現代瀏覽器中相同的設計，並且大多數人仍然在使用更低版本的IE .... :( – kikix2125

好吧，我會修改我的答案，包括一些CSS，你需要這樣做你要怎麼做。 – matthewpavkov

好吧，我更新了我的答案（參見上文）。讓我知道如果有幫助。 – matthewpavkov

修復你的CSS，它不會「跳」：

ul.menuItems li:hover:before { 
    background: url("../img/menuHoverLeft.png") no-repeat 50% 0%; 
} 
ul.menuItems li:hover:after { 
    background: url("../img/menuHoverRight.png") no-repeat 50% 100%; 
}

並給予height與width正常工作。

來源

2013-01-14 16:47:16 Morpheus

這不起作用。內容將內聯內容添加到元素。另外，'content'不支持'background'屬性。你似乎混淆了這兩者。 – matthewpavkov

我的不好。請參閱編輯版本。 – Morpheus

給予寬度和高度將有助於解決問題，但是您仍然無法在「內容」中進行「無重複」和定位。這是不正確的。 – matthewpavkov

導航與CSS的懸停效果

回答

相關問題