Question

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

适用于：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。

Click here for phrasing content allowed.

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

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

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

在此处向Mozilla提交了

编辑错误：https://bugzilla.mozilla.org/show_bug.cgi?id=843003

jsfiddle here：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，＆＃34;选择器[不要]定义'：active'或'：hover'元素的父级是否也处于该状态。＆＃34; < / p>

在您的情况下，父元素（.product）已经被:hover伪类（.product:hover .offer）悬停。它在其他浏览器中工作似乎是规范的不完美实现。

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

Answer 2

如果您知道孩子的大小，有一个简单的方法可以使button标签的子项对悬停敏感并点击FF - 如果您知道孩子的大小。

你可以做到：

使用<div style = "position : relative">元素
为按钮的孩子设置位置（例如，增加按钮的padding-right）
使用style = "position : absolute;"

享受您的按钮，让孩子对在FF和其他浏览器中悬停敏感。

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

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

2 个答案: