Question

当我将鼠标悬停时，我希望我的按钮有一个背景/字体颜色转换，但是当我点击它时（活动状态）则不行。

目前我对悬停和活动都有过渡效果。我尝试在{active>：hover上添加transition: 0s ease-out;但我没有得到预期的结果。

什么是正确，最干净，最简单的方法（使用css）？

＆＃13;

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

＆＃13;

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

＆＃13;

非常感谢。

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

如果您希望按钮返回到按钮上的原始颜色：激活，则将原始值添加到：活动块将更正此设置。

但是，如果要在活动时将鼠标悬停在按钮上时显示颜色，只需删除：活动块即可产生效果。

两者都在彼此旁边。希望这是你想要的。：）

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/

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

4 个答案: