聚焦后如何禁用悬停效果答案

【问题标题】：how to disable hover effect when once focused聚焦后如何禁用悬停效果
【发布时间】：2016-07-05 21:16:15
【问题描述】：

.form-signin input[type="text"]:focus{
	
	border: 1px solid blue;
}

.form-signin input[type="password"]:focus{
	
	border: 1px solid blue;
	outline: none;
	box-shadow:none;
	
}



.form-signin input[type="text"]:hover{
	
	border: 1px solid black;
	box-shadow: none;
}

.form-signin input[type="password"]:hover{
	
	border: 1px solid black;
	outline: none;
	box-shadow:none;
	
}

.form-signin input[type="text"]
{
	border: 1px solid #8c8c8c;
    margin-bottom: 10px;
	width: 500px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
    display: block; 
	margin: 10px auto;
	width: 500px;
	border: 1px solid #8c8c8c;
	-moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

<html>
</body>

<form class="form-signin">
                <input type="text"  class="form-control" method="post" placeholder="Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email'" required  />
                <input type="password" class="form-control" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'password'"  required>

  </form>

</body>
</html>

我在我的网页上添加了 :hover 和 :focus 用于电子邮件和密码的输入字段。问题是，一旦任一字段被聚焦，即点击，悬停效果仍然保持活动状态，我想禁用它。更准确地说，让我们假设我为 :hover 和 :focus 提供了边框颜色属性，如下所示

默认 --> 灰色

悬停 --> 黑色

焦点 --> 蓝色

所以根据上述假设，在单击任一输入字段后，BOX 应该变成蓝色，并且无论我的鼠标悬停在该框上它应该保持蓝色，但是该死的！盒子变黑了>:(我希望我没有弄乱你的大脑。

为了让您更好地理解我想要实现的目标，我在下面留下了 topcoder 登录页面的链接

https://accounts.topcoder.com/connect

这是显示我遇到的问题的 sn-p

【问题讨论】：

object.addEventListener("mouseover", function(){;

标签： html css hover

【解决方案1】：

悬停时似乎有框阴影和较粗的边框渲染。我把这段代码放在检查器中，它似乎摆脱了你的悬停问题。

input.widest.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-touched:hover {
    box-shadow: none;
    border: 1px solid #b7b7b7;
}

【讨论】：

因为我没有直接使用参考网站的代码，所以我无法按照您所说的做，我已经编辑了问题并添加了我的 CSS 和 HTML 代码，请您参考一下给我一个答案？任何形式的帮助将不胜感激
其实我误解了你的问题。这是您应该尝试的： .form-signin input[type="text"]:hover:not(:focus){ 边框：1px 纯黑色；盒子阴影：无； } .form-signin input[type="password"]:hover:not(:focus){ 边框：1px 纯黑色；大纲：无；盒子阴影：无；我刚刚添加了 :not(:focus)。