css - 悬停时圆 Angular 图像变化

Question

我创建了一个圆 Angular 框/按钮并切下它的第一个 Angular 、中间条(水平重复以调整按钮文本/内容的宽度)和最后一个 Angular 并使用以下标记:

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

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

问题:

我还创建了类似的三个悬停图像切片，但我想知道如何将悬停应用于这些按钮，因为如果我对这些悬停切片使用 :hover，那么即使悬停在 Angular 图像上也会创建悬停影响。一种替代方法是完全使用固定宽度 按钮和切片按钮，但我不想那样做。

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;