FF中的按钮元素不对子元素应用悬停背景色。

Question

我需要使用语义标记的SEO代码友好的产品使用按钮元素，和模式属性。因此，我使用了"span“元素来分离各个项目。我设置了我想要与背景效果悬停为显示:块的项目。

工作范围: Chrome，Safari on MAC。Windows上的Chrome和IE。在Mac或Windows的FF中不工作:在FF中，不应用背景颜色悬停效果。瓦特？

不能在按钮元素中使用"ul、ol、li、div“或任何其他不是”短语内容“的元素，请参见此处：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button。

点击这里获得允许的短语内容。

不能使用图像。无法使用Javascript。

编辑：“按钮:悬停”和“按钮:悬停.class”样式工作良好。“按钮.class:hover”在FF中不起作用。我更新了小提琴以显示我对悬停的期望。

编辑在这里验证为一个问题：https://support.mozilla.org/en-US/questions/1014203

编辑错误文档在这里：bug.cgi?id=843003

这里的摇摆不定：http://jsfiddle.net/jbergloff/32jh2/

HTML:

<button class="product">
    <span class="offer">
        <span class="product-name">Product</span>
        <span class="product-price">$5.99</span>
    </span>
    <span class="product-features">
        <span class="list-item">HOVER ME</span>
        <span class="list-item">List Item 2</span>
        <span class="list-item">List Item 3</span>
    </span>
</button>

CSS:

.product {
    display: block;
    border: none;
    background: green;
    color: #fff;
    position: relative;
    min-width:150px;
    cursor: pointer;
}
.product .offer {
    display: block;
    border: solid 1px green;
    margin: 5px;
    padding: 10px;
}
.product:hover .offer {
    border: solid 1px #FFF;
}
.product-name {
    font-size: 1.3em;
    display: block;
}
.product-price {
    display: block;
    font-size: 2em;
    font-weight: bold;
}
.product-features {
    display: block;
}
.product-features .list-item {
    display: block;
    text-align: center;
    line-height: 30px;
    font-style: italic;
    padding: 2px;
    height:auto; /* in case a feature needs to be on two lines, don't cut off or hide the text */
}

/* WAT: this doesn't work in FF */
.product-features .list-item:hover {
    background: lightgreen;
    color: #000;
}

Answer 1

根据W3C规范，“选择器不定义元素的父元素‘：active’或‘：悬浮’是否也处于这种状态。”

在您的示例中，父元素(.product)已经与:hover伪类(.product:hover .offer)混在一起。它在其他浏览器中工作似乎是规范的一个不完善的实现。

此外，在火狐中，HTML5 <button>元素的子元素似乎不是悬停事件的有效候选。这是一个bug，我已经向Bugzilla提交了一个bug报告。在它被修复之前，它似乎没有解决方案。下面是要修复的bug报告：bug.cgi?id=843003

Answer 2

有一个简单的技巧来使button标签的子标记是敏感的悬停和点击在FF -如果你知道孩子的大小。

你可以让它做：

1. 带<div style = "position : relative">元素的包装按钮
2. 为按钮的子节点留出位置(例如增加按钮的padding-right )
3. 使用style = "position : absolute;"在原始位置创建子

享受您的儿童敏感按钮在FF和其他浏览器悬停。

示例：https://plnkr.co/edit/9tmsMMxFXpBPqQCbP8VW?p=preview