进行双向过渡声明或过渡，以考虑以前活跃的伪级？

发布于 2025-01-20 05:08:44 字数 1665 浏览 0 评论 0原文

我想要的正是使一个按钮在鼠标悬停时淡入另一种颜色，但在单击时立即改变颜色。换句话说，当鼠标进入或离开时，颜色会缓慢变化，但当用户按下或释放鼠标按钮时，颜色会突然变化。

问题是我无法将两者分开。这是我尝试过的：

<html>
  <head>
    <style>
      button {
        width:  40vw;
        height: 20vw;
        position: absolute;
        top:  50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid gray;
        border-radius: 0;
        cursor: pointer;
        transition-duration: 0.7s;
      }
      button:hover {
        background-color: lightgray;
      }
      button:active {
        background-color: darkgray;
        transition-duration: 0s;
      }
    </style>
  </head>
  <body>
    <button>
      Click here
    </button>
  </body>
</html>

遗憾的是，button:active 规则中的 transition-duration 属性仅以一种方式影响转换，而不以另一种方式影响。按下单击时过渡持续 0 秒，但释放时持续 0.7 秒。

原因是它实际上是到 button:hover 的转换。但我无法在 button:hover 规则中添加 transition-duration: 0s 因为我仍然希望鼠标进入按钮时过渡能够平滑。我无法区分前一个选择器是 button 的情况和它是 button:active 的情况。

我可以使用 JavaScript 事件，但这个问题似乎很简单，只有 css 解决方案。

编辑：我几乎用下面的代码绕过了它，如果你在第一次点击后没有再次输入按钮，那么它会完美地工作。由于它仍然是集中的，所以这次过渡是立即的。

      button:hover {
        background-color: lightgray;
      }
      button:focus {
        background-color: lightgray;
        transition-duration: 0s;
      }
      button:active {
        background-color: darkgray;
        transition-duration: 0s;
      }
      button:not(:hover) {
        background-color: #efefef;
        transition-duration: 0.7s;
      }

原文

What I want precisely is to make a button that fades into another color when the mouse hovers it, but instantly changes color on a click. In other words, the color would change slowly when the mouse enters or leaves it, but abruptly when the user presses the mouse button or releases it.

The problem is that I can't dissociate the two. Here is what I tried:

<html>
  <head>
    <style>
      button {
        width:  40vw;
        height: 20vw;
        position: absolute;
        top:  50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid gray;
        border-radius: 0;
        cursor: pointer;
        transition-duration: 0.7s;
      }
      button:hover {
        background-color: lightgray;
      }
      button:active {
        background-color: darkgray;
        transition-duration: 0s;
      }
    </style>
  </head>
  <body>
    <button>
      Click here
    </button>
  </body>
</html>

Sadly, the transition-duration property inside the button:active rule only affects the transition in one way, not in the other. The transition lasts 0 sec on pressing click, but it lasts 0.7 sec on release.

The reason is that it is in fact a transition to button:hover. But I can't add transition-duration: 0s in the button:hover rule because I still want the transition to be smooth when the mouse enters the button. And I cannot differentiate the case where the previous selector was button from that where it was button:active.

I could use JavaScript events but the problem seems basic enough to have a css-only solution.

Edit: I almost bypassed it with the following code, which would work perfectly if you didn't enter the button again after the first click. As it is still focused, the transition is immediate this time.

      button:hover {
        background-color: lightgray;
      }
      button:focus {
        background-color: lightgray;
        transition-duration: 0s;
      }
      button:active {
        background-color: darkgray;
        transition-duration: 0s;
      }
      button:not(:hover) {
        background-color: #efefef;
        transition-duration: 0.7s;
      }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黯淡〆 2025-01-27 05:08:44

不使用相同的属性也可以做到。使用 background-image 和渐变来使颜色处于活动状态，并且不会触发转换

button {
  width: 40vw;
  height: 20vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid gray;
  border-radius: 0;
  cursor: pointer;
  transition-duration: 0.7s;
}

button:hover {
  background-color: lightgray;
}

button:active {
  background-image: linear-gradient(darkgray 0 0);
}

<button>Click here</button>

Don't use the same property and you can do it. Use background-image and a gradient to have the color on the active state and it won't trigger the transition

button {
  width: 40vw;
  height: 20vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid gray;
  border-radius: 0;
  cursor: pointer;
  transition-duration: 0.7s;
}

button:hover {
  background-color: lightgray;
}

button:active {
  background-image: linear-gradient(darkgray 0 0);
}