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中，没有任何反应。

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

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

任何线索都值得赞赏。

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

Pen

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);

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

2 个答案: