使用图像精灵在Firefox和Chrome之间的CSS按钮悬停问题
使用图像精灵在Firefox和Chrome之间的CSS按钮悬停问题
提问于 2011-06-17 07:18:21
变换图像对常规状态和悬停状态都使用单个图像。这些按钮在Firefox和Chrome中都显示得很好，但在Firefox中不能进行翻转。
下面是HTML，它使用多个按钮的列表(这里只显示了一个按钮的一个实例)：
<div id="buttons">
<ul class="stencil_buttons">
<li>
<button type="submit" id='addField'>
<a class="global_button" href=""><span>Button Text</span></a>
</button>
</li>
</ul>
</div>下面是CSS：
a.global_button span {
background: transparent url('../images/button_left.png') no-repeat 0 0;
display: block;
line-height: 22px;
padding: 3px 0 5px 18px;
color: #fff;
}
a.global_button {
background: transparent url('../images/button_right.png') no-repeat top right;
display: block;
float: left;
height: 30px;
margin-right: 6px;
padding-right: 20px;
text-decoration: none;
font-size: 14px;
}
a.global_button:hover span {
background-position: 0 -30px; color: #fff;
}
a.global_button:hover {
background-position: right -30px;
}提前感谢您的帮助。
Stack Overflow用户
发布于 2011-06-17 08:22:59
尝试使用button:hover a.global_button span和button:hover a.global_button，而不是上面相应的选择器。当周围的元素不是button时，上面问题中的选择器将在FF中工作，但当它是时，它们就不工作了；我猜测悬停状态会停在按钮上，并且不会过滤到FF中的子元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6379726
复制相关文章
相似问题
腾讯云开发者
