Question

我创建了一个圆形框/按钮，并切出第一个角，中间条（水平重复以调整按钮文本/内容的宽度）和最后一个角，并使用以下标记：

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

这些div具有来自CSS的相应图像并向左浮动。这三个div创建一个带有文本关于我们的圆形按钮，这很好。

问题：

我还创建了类似的三片悬停图像，但我想知道如何将hover应用于这些按钮，因为如果我将:hover与这些悬停的切片一起使用，那么即使悬停在角落图像上也会产生悬停效果。另一种方法是完全使用固定宽度按钮和切片按钮，但我不想这样做。

Answer 1

用<a>元素包裹它（如果你关心语义HTML，请使用跨度代替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中获得任何爱，但它会很好地降级并且是ridiculously easy to implement：

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

悬停上的圆角图像变化

2 个答案: