Question

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

mouseleave

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

我试图在btn：hover上设置转换：0，但它不会停止1s的悬停颜色的淡入淡出。它还在那里。我希望悬停颜色起作用，只是不要将1转换为该颜色。

Answer 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

幻灯片上的过渡按钮但不悬停

1 个答案: