我已经在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.
解决方法
正如您所评论的,如果您想在使用按钮更改背景颜色时阻止转换,则可以使用：hover块上的转换
#transition:hover {
background-color: #ADE1E1;
transition: .5s background-color;
-webkit-transition: .5s background-color;
-moz-transition: .5s background-color;
}
Demo 2(背景颜色不会改变,提前阅读)
Note: Anyways you will need the below solution as well,else your
background-colorwon’t be changed
Demo 3(如果你关心：甚至在使用jQuery更改背景颜色后悬停)
这是因为jQuery添加了具有最高偏好/最具体的内联CSS,因此：hover background-color不会被尊重,你必须使用！important在这种情况下
#transition:hover {
background-color: #ADE1E1 !important;
}
