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 1}}阻止

#transition:hover {
    background-color: #ADE1E1;
    transition: .5s background-color;
    -webkit-transition: .5s background-color;
    -moz-transition: .5s background-color;
}

Demo 2 （background-color不会改变，提前阅读）

注意：无论如何你也需要以下解决方案，否则你的 background-color不会被更改

Demo 3 （即使在使用jQuery更改:hover后仍关心background-color

这是因为jQuery添加了最高偏好/最具体的内联CSS，因此:hover background-color将不会被尊重，您将不得不使用{{ 1}}在这种情况下

Demo

!important

或者，如果您更喜欢使用jQuery添加和删除#transition:hover { background-color: #ADE1E1 !important; }，而不是使用class方法，那么您也不会需要.css()。< / p>

如何仅在悬停时显示CSS转换？

1 个答案: