0

The output I'm getting is the box should move from left to right as per the code but it is not doing so.

.parent {
  position: relative;
  height: 100px;
  background-color: rgb(255, 255, 255);
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border: 3px solid black;
  background-color: chartreuse;
  transition-duration: 2s;
  transition-property: left;
  transition-timing-function: linear;
}

.parent:hover .child {
  left: calc(100%-100px);
}
<div class="parent">
  <div class="child"></div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Himanshu Thakur
  • 1
  • 2
    [`calc`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc()) requires spaces in the calculation so it needs to be `calc(100% - 100px)` to work. _"The + and - operators must be surrounded by whitespace."_ – j08691 Jan 26 '22 at 15:15

1 Answers1

-1

Instead of calc(100%-100px) it should be calc(100% - 100px) inside of the .parent:hover .child { }, and as long as you hover over the parent element you should make the box move from left to right.

antonio-erick
  • 44
  • 5
  • 1
    I already stated that in a comment 45 minutes ago. Please don't answer questions that are clearly at fault from a typo. Instead, vote to close the question as off-topic due to a typo. This specific reason exists just for this purpose. Thanks – j08691 Jan 26 '22 at 16:28
  • @j08691 OP has 19 reputation; they can't vote to close yet (they likely also aren't familiar with flagging). As a CSS and HTML gold badge holder, you should have been able to close this as a duplicate, no? – TylerH Jan 26 '22 at 20:03
  • @TylerH Just educating a new user on closing and flagging. I voted to close as a typo, not a dupe. – j08691 Jan 26 '22 at 20:11