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

【问题标题】：Weird hover behavior in IE 11 and FirefoxIE 11 和 Firefox 中奇怪的悬停行为
【发布时间】：2018-07-28 03:28:07
【问题描述】：

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

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 中，什么也没有发生。

这是奇怪的部分。如果我使用开发者。工具并检查悬停检查元素，CSS更改为正确的值，并且跨度的背景在屏幕上正确更改，当我用鼠标实际将鼠标悬停在它上面时它不起作用。如果我在悬停部分添加“颜色：蓝色”，当我将鼠标悬停在它上面时，文本颜色会发生变化，只有背景部分不起作用。

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

感谢任何线索。

我添加了一支 Pen，因此您可以看到它在 Chrome 中工作，但在 FF 中不工作。如果您在 Firebug 中检查 .content 范围并单击悬停复选框，则样式将正确应用，即使将鼠标悬停在按钮上没有任何作用。

Pen

【问题讨论】：

你希望你的无效 CSS 做什么？
输入错误。我应该贴出来的。这是实际代码： span.content:hover { background-color: #2b9385;背景图像：线性渐变（#2b9385，#007571）；红色; }
查看我添加的 CodePen 示例。
您的示例未显示您在代码笔中出现的错误。您必须提供minimal reproducible example
我能够复制，这很奇怪......

标签： html css hover

【解决方案1】：

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

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

【讨论】：

我不知道为什么有人不赞成你的回答。这正是我所需要的（尽管它破坏了 IE 11 中的内容）。我也不知道为什么在 Pen 启动后这个问题被否决（许多人在查看 Pen 时看到了这个问题）。这是一个棘手的问题，而且解决起来一点也不明显。

【解决方案2】：

我认为你缺少冒号（:) 所以试试这个

background-image:(red, orange);

【讨论】：

我已经更新了问题中的代码并添加了一支笔。问题依然存在。