html - CSS 悬停代码在 Firefox 上不起作用

标签 html css

<分区>

我有这么多用于按钮及其悬停的代码。此代码无处不在,它在 chrome 上运行良好,即 safari,但在 Firefox 上不起作用。除悬停部分外,与按钮相关的每个 CSS 代码都工作正常。

      <button class="button validation-passed" onclick="productAddToCartForm.submit(this)" dtyle="float:left" title="Add to Cart" type="button">

    <span>
       <span>

        Add to Cart

       </span>
   </span>

 </button>

这是按钮的 CSS 代码:

       button.button::-moz-focus-inner { padding:0; border:0; } /* FF Fix */
       button.button { -webkit-border-fit:lines; } /* <- Safari & Google Chrome Fix */
       button.button { overflow:visible; width:150px; border:0; padding:0; margin:0;    background:transparent; cursor:pointer;}
       button.button span { display:block;  font:12px/24px georgia; text-align:center; white-space:nowrap; color:#fff;background:#f79b29;border-color:#7B9617;height:24px;padding:0 8px;font-weight:normal !important;}
      button.button span:hover{background:#f48227}
      button.button span{ border:0; padding:0; }

最佳答案

改变

 button.button span:hover {
  background:#f48227
  }

进入

 button.button:hover span {
  background:#f48227
  }

演示:http://jsfiddle.net/lotusgodkk/GCu2D/60/

关于html - CSS 悬停代码在 Firefox 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23384546/

上一篇:javascript - 我可以用 jQuery 或 JavaScript 更改此 CSS 吗?

下一篇:javascript - Jquery:单击复选框时隐藏 slider

相关文章:

html - 根据其中的@media 删除或调整不同 div 的图像大小?

css - 3 内联缩放图像

android - 如何使用 Assets 文件夹中的 CSS 文件加载 URL?

html - CSS 圆圈在 ios 上看起来是椭圆形的

javascript - 为什么我不能将 cookie 放入变量中,然后将结果分配给 div?

html - 无法以 100% 宽度向右浮动导航栏

Firefox 中的 Jquery 没有正确报告 border-bottom-width 属性

javascript - HTML 表单只读 SELECT 标记/输入

jquery - 样式在 IE8 中不适用,但在 Chrome 和 Firefox 中适用

css - 仅将 dropShadow 添加到网格 Pane JavaFx 2.2 的边框