CODEWITHSUNDEEP
htmlcssreactjs
Tom
Tom

Reputation: 287

Div background-color transition not working

I have added transition to my buttons and it works fine

I have a div with width/height defined inline via props (react), the transition code looks very similar to the button so I'm unsure why it isn't wokring. For this example I just want a simple transition from a white background to red when you hover.

I have set the background color to white initially and :hover to red:

background-color: red;

transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;

However this results in the expected result.. without any transition

I have tried changing the width on hover and setting tranisition: all 1s but it works without any transition again.. Why is this happening?

Thanks

Upvotes: 0

Views: 1275

Answers (4)

Rayees AC
Rayees AC

Reputation: 4659

Try this, if set initially white to div background. Default it is white. so, we can add transition , then hover the background change to red

CSS

.box{ 
     transition: background-color 0.5s; 
 }
.box:hover{ 
     background-color: red; 
 }

SCSS

.box{ 
     transition: background-color 0.5s; 
   &:hover{ 
     background-color: red; 
   }
}

Try this snippet.

.box{
  transition: background-color 0.5s;
}
.box:hover{
    background-color: red;
}
<div class="box" style="width:100vh;height:100vh;"></div>

Upvotes: 0

Tom
Tom

Reputation: 287

Thanks for the fast responses. My apologies for the missing details. Turns out it was because the AOS (animation on scroll) library causes issues if doing transitions on the same element. I solved this by wrapping the div in another div.

Upvotes: 1

Siona Fernandes
Siona Fernandes

Reputation: 375

Usually, the transition is given to the element.

Try this instead -

Css

div {
  background-color: white;  
  transition: background-color 0.5s ease-in-out;
}
div:hover {
  background-color: red;
}

Sass -

div {
  background-color: white;  
  transition: background-color 0.5s ease-in-out;
  &:hover {
    background-color: red;    
  }
}

Upvotes: 0

Jester
Jester

Reputation: 151

It would help if you showed more of what you have on the hover, but I'm assuming that maybe you have the code set something like this:

.box{
    background-color: red;
}
.box:hover{
   transition: background-color 0.5s;
   -webkit-transition: background-color 0.5s;
   -o-transition: background-color 0.5s;
   -moz-transition: background-color 0.5s;
}

It should be like this:

.box{
   transition: background-color 0.5s;
   -webkit-transition: background-color 0.5s;
   -o-transition: background-color 0.5s;
   -moz-transition: background-color 0.5s;
}
.box:hover{
    background-color: red;
}

Upvotes: 0

Related Questions