按钮在悬停时短暂消失

Question

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

有谁知道为什么会这样？

＆＃13;

＆＃13;

1.13.1

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

此帖仅供参考

• 正如萝卜所述;问题是您已将transition:应用于渐变背景，因此需要在第一次转换时从null重置背景。

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

• 没有必要全部过渡;仅在您实际想要更改的元素上设置过渡。

• 删除渐变问题（已注释掉）可解决问题。

• 您似乎遇到语法问题：to right bottom是正确的语法;不是＆＃34;到右下角＆＃34;它是[left|right] [top|bottom]

• 因此，您的问题与Use CSS3 transitions with gradient backgrounds

完全相同

• 为了清晰起见，减慢过渡并增加色差：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用Gradients，

部分答案：

在我的各种修复之后，现在在从白色加载的第一个实例之后，渐变转换正常工作（在更多的Firefox上）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;