Question

我有一个用div表示的简单正方形。我希望它在鼠标悬停时更改其颜色，并在鼠标悬停和鼠标离开时平稳地进行0.8s过渡。有用。现在，我希望正方形在屏幕较小但没有过渡的情况下更改位置。您可以测试此代码，并且可以看到位置变化是渐进的，但是我希望它是立即变化的。那么如何将transition限制为仅颜色变化呢？

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;
  }
}

<div></div>

Answer 1

您可以指定要在过渡中更改的属性，例如：transition: background-color 0.8s;

此外，您不需要transition上的hover属性

div {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: background-color 0.8s;
}

div:hover {
  background-color: red;
}

@media screen and (max-width: 680px) {
  div {
    margin-left: 200px;
    margin-top: 200px;
  }
}

<div></div>

Answer 2

在过渡规则中使用背景色。参见：

    div {
      height: 100px;
      width: 100px;
      background-color: blue;
      transition: background-color .8s;
    }
    
    div:hover {
      background-color: red;
    }
    
    @media screen and (max-width: 680px) {
      div {
        margin-left: 200px;
        margin-top: 200px;
      }
    }

<div></div>

指定过渡非常重要。

Answer 3

您可以用0秒和！important覆盖过渡，以确保覆盖过渡。

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;  
    transition: 0s !important;
  }
}

<html lang="en" dir="ltr">
<head> 
  <meta charset="utf-8">
  <link rel="stylesheet" href="debug.css">
  <title>Test</title>
</head>

<body>
  <div></div>


</body></html>

将过渡速度限制为仅一个属性

3 个答案: