圆角图像在Hover上的变化
提问于 2010-03-26 03:57:33
我创建了一个圆形框/按钮，并切片了它的第一个角，中间条(重复水平调整按钮文本/内容的宽度)和最后一个角，并使用以下标记：
<div id="left-corner"></div>
<div id="middle-bar">About Us</div>
<div id="right-corner"></div>这些div有来自CSS的相应图像，并向左浮动。这三个div通过文本创建了一个关于我们的单一圆角按钮，这很好。
问题：
我还创建了类似的三片悬停图像，但我想知道如何将悬停应用于这些按钮，因为如果我在这些悬停图像中使用:hover，那么即使在角图像上悬停也会产生悬停效果。一种选择是完全使用固定宽度的按钮和切片按钮，但我不想这样做。
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-03-26 04:02:10
你能把那三块钱包在另一层吗？比如：
<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;Stack Overflow用户
发布于 2010-03-26 04:01:46
用<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 */ }编辑：
因为:悬停伪选择器只能在<a>元素上使用，所以我们必须使用它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2523029
复制相关文章
腾讯云开发者
