Question

我创建了一个元素，当您将鼠标悬停在其上时，边框颜色会从原始颜色发生变化。当边框聚焦时，边框会变为另一种颜色 HTML：

<input id="colorchange" type="text">

CSS：

#colorchange {border: thin solid white;}
#colorchange:hover {border: thin solid grey;}
#colorchange:focus {border: thin solid black;}

问题是，当元素聚焦时，我希望边框保持黑色，即使用户将鼠标悬停在它上面也是如此。不幸的是，当我将焦点聚焦在元素上时，元素变为灰色，但我希望它保持黑色。
我该怎么做？

Answer 1

只需在css中使用相同的设置悬停元素，方法是将它们添加到同一行，用逗号分隔：

/* These two element selectors are now on the same line, separated by comma */
#colorchange, #colorchange:hover { border: thin solid white; }

#colorchange:focus { border: thin solid black; }

<强> HERE IS A DEMO

Answer 2

尝试

#colorchange input[type='text']:focus{border: thin solid black;}

Answer 3

在悬停样式上设置！important属性

#colorchange {border: thin solid white;}
#colorchange:hover {border: thin solid grey !important;}
#colorchange:focus {border: thin solid black;}

Answer 4

进行样式设置的最佳方法是让一个类别优先于另一个类别。避免使用!important，因为它会产生创建规则优先级的问题。

使用简单的类名而不是ID，您可以这样做：

.colorchange:hover {border: thin solid grey;}
.colorchange.colorchange:focus {border: thin solid black;}

允许使用双类名称声明，并为第二类赋予更高的优先级。

确定优先级的另一种方法是分配特异性。一条规则比另一条规则更具体：

#colorchange:hover {border: thin solid grey;}
body #colorchange:focus {border: thin solid black;}

如何在聚焦元素时防止悬停样式

4 个答案: