html - FF 中的按钮元素未在子元素上应用悬停背景颜色

Question

我需要使用按钮元素和架构属性为 SEO 代码友好型产品使用语义标记。所以我使用“跨度”元素来分隔各个元素。我确实将我想要悬停的元素设置为 display:block。

适用于:Mac 上的 Chrome、Safari。 Windows 上的 Chrome 和 IE。 在 Mac 或 Windows 的 FF 中不起作用:在 FF 中，未应用背景色悬停效果。哇？

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

Click here for phrasing content allowed.

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

编辑: “button:hover”和“button:hover .class”样式工作正常。 “按钮 .class:hover”在 FF 中不起作用。我更新了 fiddle 以显示我对悬停的期望。

EDIT 在此处验证为问题:https://support.mozilla.org/en-US/questions/1014203

EDIT 此处向 Mozilla 提交错误:https://bugzilla.mozilla.org/show_bug.cgi?id=843003

jsfiddle 在这里: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

According to the W3C specification , “选择器 [不] 定义‘:active’或‘:hover’元素的父元素是否也处于该状态。”

在您的例子中，父元素 ( .product ) 已经被 :hover 悬停了。伪类(.product:hover .offer)。它在其他浏览器中工作似乎是规范的不完美实现。

此外，似乎在 Firefox 中，HTML5 的子元素 <button>元素不是悬停事件的有效候选者。这是一个错误，我已经向 Bugzilla 提交了错误报告。在修复之前，似乎没有解决方案。这是提交修复的错误报告:https://bugzilla.mozilla.org/show_bug.cgi?id=843003