将悬停光标样式应用于元素或其：悬停

Question

我对任何事情都没有问题，当你想在悬停时改变光标时，我只是好奇，最好使用什么。你更喜欢什么？

方法1：

.element {
    cursor: pointer;
}

方法2：

.element:hover {
    cursor: pointer;
}

两者都会这样做 - 当你悬停.element时，将光标更改为指针。但是，这两种方法之间有什么区别吗？当使用方法1而不是方法2时，它会对浏览器（即性能）产生任何影响吗？我只是好奇。

Answer 1

没有真正的区别。我倾向于将风格放在风格最佳的地方。在以下示例中，cursor:pointer部分中:hover的{​​{1}}是有意义的，因为.clickable仅在悬停时具有不同的样式（即具有蓝色背景）。否则，我建议您在常规.clickable选择器中使用它。

HTML：

<span class="green-bg">Span 1</span>
<span class="green-bg clickable">Span 2</span>
<span class="green-bg">Span 3</span>

CSS：

.green-bg {
    background: green;
}
.clickable:hover {
    background: blue;
    cursor: pointer;
}