懸停時的圓角圖像更改

Question

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

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

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

問題：

我還創建了類似的三片懸停圖像切片，但是我想知道如何將懸停按鈕應用於這些按鈕，因為如果將:hover與這些懸停的切片一起使用，那么即使將鼠標懸停在角圖像上也會產生懸停效果。 一種選擇是完全使用固定寬度的按鈕和切片按鈕，但我不想這樣做。

Answer 1

用<a>元素將其包裝（如果您關心語義HTML，請使用span而不是div）。

<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>元素上使用，所以我們必須使用它。

Answer 2

您可以將這三個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那里得到任何愛，但是它會降級，並且易於實現 ：

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