如何仅在鼠标悬停时显示CSS过渡效果？

Question

我在一个div上添加了一个过渡效果，当鼠标悬停时，颜色会改变，就像这个例子一样：http://jsfiddle.net/78LWT/

以下是HTML代码：

<div id="transition"></div>

以下是CSS代码：

#transition {
    background-color: #DA1E1E;
    width: 100px;
    height: 100px;
    transition: .5s background-color;
    -webkit-transition: .5s background-color;
    -moz-transition: .5s background-color;
}
#transition:hover {
    background-color: #ADE1E1;
}

但问题在于： http://jsfiddle.net/E295T/（与之前相同的CSS代码），使用以下HTML代码：

<div id="transition"></div><br />
<button onclick="recolortransitiondiv();">Recolor that div!</button>

以下是JavaScript/jQuery代码：

function recolortransitiondiv() {
    $("#transition").css("background-color", "#1EDA1E");
}

这就是我的问题所在。当通过除了悬停在其上之外的任何方法改变颜色时（例如，当div处于活动状态时，或者当使用JavaScript/jQuery更改div的属性时），我不想显示过渡效果，但是当我将鼠标悬停在div上方时，我想要显示该过渡效果。

有没有办法解决这个问题？ 我愿意使用jQuery，普通的JavaScript，CSS和HTML。

- Lucas

Answer 1

正如您所评论的那样，如果您想要在使用button更改background-color时禁止transition，可以通过在:hover块上使用transition来实现。

#transition:hover {
    background-color: #ADE1E1;
    transition: .5s background-color;
    -webkit-transition: .5s background-color;
    -moz-transition: .5s background-color;
}

演示2 (但background-color不会改变，请往下看)

注意：如果您想更改 background-color ，则还需要以下解决方案

演示3 (即使使用jQuery更改background-color后也关心:hover)

---

这是因为jQuery添加了具有最高优先级/最特定性的内联CSS，因此:hover background-color将不被尊重，您必须在这种情况下使用!important。

演示

#transition:hover {
    background-color: #ADE1E1 !important;
}

否则，如果您喜欢使用jQuery添加和删除class，而不是使用.css()方法，那将更好，这样您就不需要!important了。

- Mr. Alien

---

我认为你可能误解了。当通过按钮更改背景颜色时，我不希望在div上显示任何过渡效果，但是在鼠标悬停在div上时，我希望过渡效果能够展现出来。 - Lucas

我必须说，唯一的问题是当我停止悬停在div上时，没有过渡效果。但谁在乎呢？接受为答案。 - Lucas