css - 悬停时颜色过渡但不是焦点/事件？

Question

我希望我的按钮在悬停时有背景/字体颜色过渡，但在我单击它时没有(事件)。

目前我在悬停和事件时都有过渡效果。我尝试在 :active 或 :hover 上添加 transition: 0s ease-out; 但我没有得到预期的结果。

什么是正确、最干净和最简单的方法(通过使用 css)？

button {
	position: absolute;
	width: 80px;
	height: 28px;
	font-size: 13px;
	font-weight: 700;
	line-height: 28px;
	color: #6cb4d5;
	font-family: 'Lato', sans-serif;
	padding: 0;
	border: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-left: 1px solid #CCC;
	background-color: #fff;
	transition: 0.3s ease-out;
}

button:hover {
	color: #f7f7f7;
	background-color: #6cb4d5;
    outline: 0;
}

button:active {
	color: #f7f7f7;
	background-color: #398cb2;
	outline: 0;
}

<button type="submit" name="sub-avatar-url" id="sub-avatar-url">&ensp;UPLOAD</button>

非常感谢。

Answer 1

试试这个 https://jsfiddle.net/2Lzo9vfc/93/

button {
    position: absolute;
    width: 80px;
    height: 28px;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    color: #6cb4d5;
    font-family: 'Lato', sans-serif;
    padding: 0;
    border: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid #CCC;
    background-color: #fff;
    transition: all 0.3s ease-out;
}

button:hover {
    color: #f7f7f7;
    background-color: #6cb4d5;
    outline: 0;
}

button:active {
    color: red;
    background-color: blue;
    outline: 0;
    transition: none;
}