我在 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。
最佳答案
正如您所评论的,如果您想在使用 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;
}
Demo 2(
background-color
不会改变,请提前阅读)Demo 3(如果您在使用 jQuery 更改
:hover
后仍然关心 background-color
)那是因为 jQuery 添加了具有最高优先级/最具体的内联 CSS,因此,
:hover
background-color
不会被尊重,在这种情况下你将不得不使用 !important
Demo
#transition:hover {
background-color: #ADE1E1 !important;
}
否则,如果您更喜欢使用 jQuery 添加和删除
class
,而不是使用 .css()
方法,那会更好,而不是您也不需要 !important
。关于javascript - 如何仅在悬停时显示 CSS 过渡?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20969099/