如何设置元素样式:焦点没有样式:悬停

Question

请告诉我是否可以使用样式:焦点没有样式:悬停，即当元素没有被选中，鼠标光标被移动到它，然后样式:悬停被应用，当元素被选中，鼠标光标被悬停时，样式:悬停没有被应用？

例如：

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选择器easily.here详细介绍*不是选择器。

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

Answer 2

试试下面的例子

注:这只是一个样本，你可以根据你的需要改变。

​

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

a:focus {
  color: green;
} 

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

​