如何仅在悬停时显示CSS过渡? [英] How to show CSS transitions only on hover?

问题描述

我在div上添加了一个过渡，以便将鼠标悬停在上面时，颜色会发生变化，就像这里的示例一样:

这是CSS代码:

  #transition {背景颜色:#DA1E1E;宽度:100px；高度:100px；过渡:.5s背景色；-webkit-transition:.5s背景色；-moz-transition:.5s背景色；}#transition:hover {背景颜色:#ADE1E1;} 

但这是问题所在: http://jsfiddle.net/E295T/(与以前相同的CSS代码)，并带有以下HTML代码:

 < div id ="transition"></div>< br/>< button onclick ="recolortransitiondiv();">为div重新着色！ 

此JavaScript/jQuery代码:

  function recolortransitiondiv(){$(#transition").css("background-color"，#1EDA1E");} 

这就是我的问题所在.当要通过颜色而不是将颜色悬停在其他任何方法上来更改颜色时(例如，当div处于活动状态时，或者当使用JavaScript/jQuery更改div的属性时)，我不希望显示过渡，但是我希望将鼠标悬停在div上时显示过渡.

有什么办法可以解决这个问题?我愿意使用jQuery，纯JavaScript，CSS和HTML.

解决方案

正如您所评论的，如果您想在 background-color 使用 button ，方法是在:hover 块

上使用 transition

  #transition:hover {背景颜色:#ADE1E1;过渡:.5s背景色；-webkit-transition:.5s背景色；-moz-transition:.5s背景色；} 

演示2 ( background-color不会改变，请先阅读)

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

演示3 (如果您想使用:将鼠标悬停在 background-color (使用jQuery更改后)

---

那是因为jQuery添加了具有最高优先级/最特定的内联CSS，因此，:hover background-color 不会成为尊重，在这种情况下，您将必须使用！important

演示

  #transition:hover {背景颜色:#ADE1E1！important;} 

---

否则，如果您更喜欢使用jQuery而不是使用 .css()方法来添加和删除 class ，那将是更好的选择.！important .

I have added a transition onto a div, so that when it is hovered on, the color changes, bit like this example here: http://jsfiddle.net/78LWT/

Here's the HTML code:

<div id="transition"></div>

Here's the CSS code:

#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;
}

But here's the problem: http://jsfiddle.net/E295T/ (same CSS code as before), with this HTML code:

<div id="transition"></div><br />
<button onclick="recolortransitiondiv();">Recolor that div!</button>

And this JavaScript/jQuery code:

function recolortransitiondiv() {
    $("#transition").css("background-color", "#1EDA1E");
}

And that's where my problem comes in. When the color is to be changed by any method other than hovering over it (for example, when the div is active, or maybe when the div's properties are changed with JavaScript/jQuery), I don't want the transition to show, but I want the transition to show when I hover over the div.

Is there any way I can solve this problem? I am willing to use jQuery, plain JavaScript, CSS and HTML.

解决方案

As you commented, if you want to prevent transition while the background-color is changed using button, the way to do is, to use transition on the :hover block

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

Demo 2 (background-color won't change though, read ahead)

Note: Anyways you will need the below solution as well, else your background-color won't be changed

Demo 3 (If you care to :hover even after changing the background-color using jQuery)

---

That is because jQuery adds inline CSS which has highest preference/most specific and hence, :hover background-color won't be respected, you will have to use !important in this case

Demo

#transition:hover {
    background-color: #ADE1E1 !important;
}

---

Or else, it would be better, if you prefer adding and removing class using jQuery, instead of using .css() method, than you won't require !important as well.

这篇关于如何仅在悬停时显示CSS过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！