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

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

尝试以下示例

注意：这只是一个可以根据需要改变的样本。

＆＃13;

＆＃13;

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

a:focus {
  color: green;
} 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以轻松地使用:not选择器执行此操作。有关:not selector

的详细信息

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