Question

我的项目中有一个按钮，试图删除outline属性，该属性默认为所使用的CSS主题。当没有应用伪类时，我可以对按钮应用CSS规则，对:hover和:focus也可以应用CSS规则。

但是，当我用鼠标或触控板单击并按住时，即使应用了:active规则，我仍然可以看到轮廓。

这是我的CSS（覆盖默认主题，这不是主题本身的CSS）：

// even with this :focus and :active rule, I get the outline
// when holding down mouse / trackpad selection
.AddButton, .AddButton:focus, .AddButton:active {
  background-color: #ffffff;
  border: solid 2px #4a4a4a;
  outline: 0; // the relevant attribute
}

.AddButton:hover {
  background-color: #3baeff;
  border: solid 2px #3baeff;
  color: #ffffff;
}

我需要使用哪个CSS选择器来覆盖默认行为？谢谢！

Answer 1

您不需要手动处理每个元素的状态及其相应的样式。如果将样式应用于没有伪类的元素，则样式也会覆盖其不同状态，例如:hover，:active等。还记得css specificity吗？下面考虑一下，无论悬停还是聚焦，按钮标题始终为红色，除非我们指定了更具体的规则:active，否则当按下标题时，标题变为蓝色。我们不需要将侦听器附加到其mousein，mouseout，mouseover事件即可处理其焦点或悬停状态样式。

button {
  color: red;
}

button:active {
  color: blue;
}

<button>OK</button>

问题的一个可能原因是您提到定义了样式

默认使用的CSS主题为开。

也许里面有一个更具体的规则来定义:focus和:active样式，然后您需要覆盖它们。仍然不需要事件来处理样式，仅CSS本身就足够了。

在下面演示。如果将悬停样式定义为绿色，则仍可以通过更具体的规则来覆盖它，例如id选择器，以使其在悬停时保持红色。

/***********site default css***********/

button:hover {
  color: green;
}

/***************override***************/

button,
#stay-red {
  color: red;
}

button:active {
  color: blue;
}

<button>green on hover</button>
<button id="stay-red">stay red</button>

Answer 2

按住或单击某个元素时，将触发css活动选择器。当光标悬停在元素上时，将触发悬停选择器。

#btn:hover { outline:1px solid red; }
#btn:active { outline:none; }

<button id="btn">red outline on hover, no outline on click</button>

Answer 3

结果很难找到，但是很简单：

.AddButton:hover:active {
  outline: 0;
}

用户按住鼠标单击时应用样式？

3 个答案: