Folo Folo - 6 months ago 12
HTML Question

My css transition doesn't work when I add the <html> tags

I was practicing with CSS and getting to know some of the more advanced features (I'm pretty new to this) and I came across a strange issue. namely, when I add to the top of my document, the transition doesn't work anymore.

This works:

<html>
<head>
<title></title>
<style type="text/css">
.container{
width: 400px;
margin-left: auto;
margin-right: auto;
background-color: #9FC;
}
.gradBox {
width: 300px;
height: 100px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-transition: width 1s;
transition: width 1s;
}
.gradBox:hover {
width: 400;
}
#grad1 {
background: linear-gradient(to right, #F00 1%, #FF0 25%, #0F0 50%, #0FF 75%, #00F 100%)
}
</style>
</head>
<body>
<div class="container">
<div class="gradBox" id="grad1">
</div>
</div>
</body>
</html>


This does not:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container{
width: 400px;
margin-left: auto;
margin-right: auto;
background-color: #9FC;
}
.gradBox {
width: 300px;
height: 100px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-transition: width 1s;
transition: width 1s;
}
.gradBox:hover {
width: 400;
}
#grad1 {
background: linear-gradient(to right, #F00 1%, #FF0 25%, #0F0 50%, #0FF 75%, #00F 100%)
}
</style>
</head>
<body>
<div class="container">
<div class="gradBox" id="grad1">
</div>
</div>
</body>
</html>


The working one works in Chrome and Microsoft Edge but the none-working one works in neither.

Any help would be much appreciated!

Answer

You will have to declare the unit on the width on hover:

.gradBox:hover {
  width: 400px;
}

You were using pixels in the initial css declaration so it will be used on hover as well. I don't know if it's a typo in your question or where but it does not work without the unit on either case so I can't really tell you why the other example would be working and the other not.