悬停时的颜色过渡但不是焦点/活动？

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

Answer 2

如果您希望按钮返回到 button:active 上的原始颜色，则将原始值添加到 :active 块将更正此问题。

但是，如果您想在活动时将鼠标悬停在按钮上时显示颜色，只需删除 :active 块即可获得该效果。

两者并排在这里。希望这是你想要的。 :)

https://jsfiddle.net/2Lzo9vfc/94/

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


#sub-avatar-url2:hover {
        color: #f7f7f7;
	background-color: #6cb4d5;
        outline: 0;
}

#sub-avatar-url2:active {
        background-color: #fff;
        color: #6cb4d5;
        outline: 0;
        transition: none;
}

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

Answer 3

这可能对你有帮助-

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-in;outline: 0;
}

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

button:active {
    color: #f7f7f7;
    background-color: #398cb2;
    outline: 0;transition:all 0ms ease-out
}
button:focus{transition:all 0ms ease-out}

Answer 4

您可以尝试将transition: 0s; 应用于活动语句 - 但是，您还需要将:focus 事件添加到声明链中，以防止释放单击时按钮转换。

你可以在这里看到小提琴： http://jsfiddle.net/eks8Lc5c/