幻灯片上的过渡按钮，但不是悬停答案

【问题标题】：Transition button on slide but not on hover幻灯片上的过渡按钮，但不是悬停
【发布时间】：2015-08-19 20:10:47
【问题描述】：

我有一个可以滑入和滑出页面的按钮。我想保持这种过渡。当您将鼠标悬停在同一个按钮上时，它具有不同的背景颜色，但它正在过渡到该背景颜色，我不希望这样。如何保持幻灯片效果的过渡但摆脱悬停效果的过渡。这是带有滑动和悬停过渡的原始代码：

button {
    width: 209px;
	cursor:pointer;
	position: absolute;
	left: 14px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-ms-transition: 1s;
	transition: 1s;
}

button:hover {
	color: rgb(255, 255, 255);
	background: rgb(90, 90, 90);
}

&lt;button&gt;Click me&lt;/button&gt;

我试图在 btn:hover 上放置过渡：0s，但它并没有阻止 1s 的悬停颜色褪色。它还在那里。我希望悬停颜色起作用，而不是花 1 秒来过渡到该颜色。

【问题讨论】：

那么...您希望它在悬停时自动成为那种颜色还是像 0.2 秒那样达到那种颜色？因为听起来你想要this 或this
定位更改的属性。例如，如果它使用left 滑入，您将只针对转换的左侧属性：transition: left 1s;，如果您希望背景颜色也转换，更快，您可以用逗号分隔：transition: left 1s, background 0.5s;
@BuddhistBeast 我仍然需要那里的过渡，因为按钮最初是滑入的。
@misterManSam 我现在要试试。我会回来报告的。谢谢。
我可能是唯一遇到这种情况的人。但在 Chrome 中，按钮不会滑入。

标签： css

【解决方案1】：

类似问题：Transition only for the border on hover, but not for background

您需要指定要转换的 CSS 属性，如下所示：

transition: left 4s, background 1s, height 8s;

在本例中，div 将在 4 秒内滑动，背景将在 1 秒内改变，高度将在 8 秒内改变。

html,
body {
  height: 100%;
  margin: 0;
}
div {
  background: #F00;
  height: 100px;
  width: 100px;
  transition: left 4s, background 1s, height 8s;
  left: 100%;
  position: fixed;
}
body:hover > div {
  left: 0;
  background: #000;
  height: 500px;
}

<div></div>
Hover here

【讨论】：