使用图像精灵在 Firefox 和 Chrome 之间出现 CSS 按钮悬停问题
翻转使用单个图像来表示常规状态和悬停状态。这些按钮在 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;
}
提前感谢您的帮助。
The rollover uses a single image for both the regular and hover states. The buttons display fine in both Firefox and Chrome, but the rollover does not work in Firefox.
Here's the HTML, which uses a list for multiple buttons (just a single instance of a button is shown here):
<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>
Here's the 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;
}
Thanks in advance for your help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试使用
button:hover a.global_button span和button:hover a.global_button而不是上面相应的选择器。虽然当周围元素不是button时，上述问题中的选择器在 FF 中可以工作，但当周围元素是按钮时，它们就不起作用；我的猜测是悬停状态在按钮处停止，并且不会过滤到 FF 中的子元素。Try
button:hover a.global_button spanandbutton:hover a.global_buttoninstead of the corresponding selectors above. While the selectors in the question above will work in FF when the surrounding element is not abutton, they do not work when it is; My guess would be that the hover state stops at the button and does not filter down to child elements in FF.