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

Question

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

例如：

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

试试下面的例子

注意：这只是一个示例，您可以根据需要进行更改。

a:hover:not(:focus) {
  color: default;
}

a:focus {
  color: green;
} 

<a href="https://www.google.com">Test!</a>

Answer 2

您可以使用 :not 选择器 easily.here 是关于 :not selector

的详细信息

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