圓角轉換懸停的圖像

Question

我創建了一個圓角的方框/按鈕，並將其第一個角落，中間條（水平重複以調整按鈕文本/內容的寬度）和最後一個角落切片並使用以下標記：

<div id="left-corner"></div> 
<div id="middle-bar">About Us</div> 
<div id="right-corner"></div> 

這些div具有來自CSS的相應圖像並向左浮動。這三個div創建一個文本的單個圓角按鈕關於我們這很好。

問題：

我也建立了類似的懸停圖像的三片，但我不知道，因爲如果我用:hover這些徘徊片，再甚至徘徊在角落的圖像也產生了如何應用懸停這些按鈕盤旋效應。一種替代方法是使用固定寬度完全按鈕和切片按鈕，但我不想這樣做。

Answer 1

你可以將這三個div包裝在另一個div中嗎？像：

<div id="button_wrapper"> 
    <div id="left-corner"></div> 
    <div id="middle-bar">About Us</div> 
    <div id="right-corner"></div> 
</div> 

然後，您可以實現對包裝的div懸停改變：

#button_wrapper:hover #left-corner {} 
#button_wrapper:hover #middle-bar {} 
#button_wrapper:hover #right-corner {} 

或者，您有使用border-radius考慮。你不會得到任何IE愛情，但它很好地降解，是ridiculously easy to implement：

-webkit-border-radius: 1px; 
-moz-border-radius: 1px; 
border-radius: 1px; 

Answer 2

用<a>元素包裝它（如果關心語義HTML，請使用跨度而不是divs）。

<a href="#" class="button"> 
    <div id="left-corner"></div> 
    <div id="middle-bar">About Us</div> 
    <div id="right-corner"></div> 
</a> 

CSS：

.button:hover #left-corner { /* something here */ } 
.button:hover #middle-bar{ /* something here */ } 
.button:hover #right-corner { /* something here */ } 

編輯：

因爲：hover僞選擇器可以在IE6 <a>元素上只用，這就是爲什麼我們必須使用它。