I have a simple square represented by a `div`. I want it to change its color on mouse hover, with a smooth 0.8s transition on both mouse hover and mouse leave.
It works. Now I want the square to change position when the screen is small, but without transition. You can test this code and you can see the position changing is progressive, but I want it to be immediate without transition. So how to limit the `transition` to only the color change ?

```css
div {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: 0.8s;
}

div:hover {
  background-color: red;
  transition: 0.8s;
}

@media screen and (max-width: 680px) {
  div {
    margin-left: 200px;
    margin-top: 200px;
  }
}
```

```html
<div></div>
```