我在 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/

10-08 22:25
查看更多