IE 11和Firefox中奇怪的悬停行为

Question

我在按钮内的跨度上有一个相当简单的悬停效果

HTML:

<span class="content">text</span>

CSS：

span.content:hover {
background-color: #2b9385;
background-image: linear-gradient(#2b9385, #007571);
color: red;
}

当我将鼠标悬停在跨度上时，它在Edge和Chrome中运行良好。在Firefox和IE 11中，什么都不会发生。

这是奇怪的部分。如果我使用dev.tools并在选中悬停的情况下检查元素，CSS会更改为正确的值，span的背景在屏幕上也会正确更改，那么当我用鼠标悬停在它上面时，它就不起作用了。如果我在悬停部分添加"color:blue"，当我悬停在它上面时，文本颜色会发生变化，只有背景部分不起作用。

我尝试过在线性渐变部分添加供应商前缀，但没有帮助(在任何情况下都不需要(。使用#hex颜色值也没有帮助。

感谢任何线索。

我添加了一个笔，这样你就可以看到它在Chrome中有效，但在FF中无效。如果你在Firebug中检查.content跨度并单击悬停复选框，即使悬停在按钮上也不会起任何作用，样式也会正确应用。

笔

Answer 1

试试这个。这肯定会有所帮助。

.progress-button:hover span#button_content.content {
background-color: #2b9385;
background-image: linear-gradient(#2b9385, #007571);
cursor: pointer;
color: red;
}

Answer 2

我想你缺少冒号(：(，所以试试这个

background-image:(red, orange);