我在一个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。