圆角转换悬停的图像

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>元素上只用，这就是为什么我们必须使用它。