How to show CSS transitions only on hover?

Tags: javascript,jquery,html,css,transition

Problem :

I have added a transition onto a div, so that when it is hovered on, the color changes, bit like this example here:

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: (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.

Solution :

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


#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 Howto..

    Font is missing glyphs for specific language - how can I utilize css fallback in this case?

    How to change
  • to variable width on css dropdown submenu
  • how to call td's id to change css style onclick

    How to set border between two products in css?

    How to align things responsive html CSS

    How to set vertical align of elements that exist into a div tag to center with css? [duplicate]

    How to set img tag vertical center : html + css

    How to hide extra overflow part of this angled css ribbon?

    How to fill width with flex boxes

    How to blend canvas to background with CSS?

    How do I create a cut-out hexagon shape?

    How to create a set of css rules for safari

    CSS Fixed width right, fluid left, right div is first in html. How do I keep left from collapsing

    How to correctly use tableless layout with borders using CSS?

    How to center align circles?

    Button transition using javascript and css, how to temporarily disable the transition

    How do I remove nav underline on hover from Bootstrap theme?

    How to make columns scroll independently using CSS?

    How to do valid CSS for li text and li text with image?

    How to apply a css class for jqGrid height property setGridHeight?

    How to make Online iPhone “Card Game” with HTML5 [closed]

    How do I set a block of text to drop to a new line all at once?

    How do you implement CSS without to have clear:both on float left and float right

    How design an unordered list of images horizontally with Bootstrap?

    How to dynamically change a class css styling?

    CSS - How to remove comments and make CSS one line

    How to make links one link per line, only in the footer via css?

    How to implement .SCSS on my own website? [closed]

    In javascript, how to get a class name from a td cell?

    With css, how to ensure wrap on span boundary?