悬停时的圆角图像更改

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;