html - 如何设置元素样式 :focus without style :hover

Question

请告诉我是否可以使用 style :focus 而不使用 style :hover，即当元素未被选中并且鼠标光标移动到它时，然后应用 style :hover，当元素被选中时并且鼠标光标悬停，样式 :hover is not applied?

例如:

input:focus {
    border: 1px solid red;
}

input:hover {
    border: 1px solid orange;
}

新的可能:

input:focus:not[':hover'] {
    border: 1px solid red;
}

input:hover {
    border: 1px solid orange;
}

Answer 1

您可以使用 :not 选择器轻松完成此操作。这里是关于 :not selector 的详细信息

input:focus:not(:hover) {
    border: 1px solid red;
}
input:hover {
    border: 1px solid orange;
}