html - 按钮在悬停时短暂消失

Question

我以前从未遇到过这个问题。当我将鼠标悬停在上面时，我的输入/按钮会消失片刻。

有人知道为什么会这样吗？

.button {
	padding: 10px 12px;
	border: 1px solid #BE1E2D;
	border-radius: 2px;
	box-sizing: border-box;
	font-family: 'Muli', sans-serif;
	font-size: 1.4rem;
	color: #FFF;
	background: linear-gradient(to bottom right, #BE1E2D, #981824);
	text-transform: uppercase;
	text-decoration: none;
	transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;
	cursor: pointer;
}
.button:hover {
	background: #BE1E2D;
	transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;
}

<input type="submit" value="Submit" class="button">

Answer 1

THIS POST IS FOR REFERENCE ONLY

• 正如 Turnip 所说；问题是您将 transition: 应用到渐变背景上，因此在第一次实现过渡时需要将背景从 null 重置。

• 您不需要在 :hover 状态下设置转换。

• 不需要全部过渡；仅在您实际想要更改的元素上设置过渡。

• 移除渐变问题(注释掉)即可解决问题。

• 您似乎有语法问题:到右下角 是正确的语法；不是“右下角”，它是 [left|right] [top|bottom]

• 因此，您的问题与 Use CSS3 transitions with gradient backgrounds 完全相同

• 为清楚起见，减慢过渡并增加颜色差异:

.button {
	padding: 10px 12px;
	border: 1px solid #BE1E2D;
	border-radius: 2px;
	box-sizing: border-box;
	font-family: 'Muli', sans-serif;
	font-size: 1.4rem;
	color: #FFF;
    background:  #981824;
	/*background: linear-gradient(to right bottom, #BE1E2D, #99CC55);*/
	text-transform: uppercase;
	text-decoration: none;
	transition: background 1s ease-in-out;
        -webkit-transition: background 1s ease-in-out;
	cursor: pointer;
}
.button:hover {
	/*background: #BE1E2D;*/
    background: #99CC55;
}

<input type="submit" value="Submit" class="button">

还有渐变，

部分答案:

在我进行各种修复之后，现在在第一个从白色加载的实例之后，渐变过渡正常工作(在更多 Firefox 上):

.button {
	padding: 10px 12px;
	border: 1px solid #BE1E2D;
	border-radius: 2px;
	box-sizing: border-box;
	font-family: 'Muli', sans-serif;
	font-size: 1.4rem;
	color: #FFF;
	background: linear-gradient(to right bottom, #BE1E2D, #99CC55);
	text-transform: uppercase;
	text-decoration: none;
	transition: background 1s ease-in-out;
        -webkit-transition: background 1s ease-in-out;
	cursor: pointer;
}
.button:hover {
	background: #BE1E2D;
}

<input type="submit" value="Submit" class="button">