如何仅在悬停时显示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.

Answer 1

正如您所评论的那样,如果您想要在使用transition时进行background-color更改button,则可以transition在:hover块上使用

#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 (如果您:hover在更改background-color使用jQuery 后仍然关心)

那是因为jQuery添加了具有最高偏好/最具体的内联CSS,因此:hover background-color不会受到尊重,!important在这种情况下你将不得不使用

演示

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

或者,如果您更喜欢class使用jQuery 添加和删​​除,而不是使用.css()方法,那么这样做会比您不需要的更好!important.