Bewerben Hover-Cursor Stil zu Element oder seine: Hover

Question

Ich habe kein Problem mit etwas, ich war nur neugierig, was ist besser zu verwenden, wenn Sie den Cursor während des Schwebens ändern möchten. Was würdest du bevorzugen?

Methode 1:

.element { 
    cursor: pointer; 
} 

Methode 2:

.element:hover { 
    cursor: pointer; 
} 

Beide werden auch tun - Ihr Cursor auf Zeiger ändern, wenn Sie .element schweben. Aber gibt es einen Unterschied zwischen diesen beiden Methoden? Wird es eine Auswirkung auf den Browser (dh die Leistung) haben, wenn Methode 1 anstelle von Methode 2 verwendet wird? Ich bin nur Neugierig.

Answer 1

Es gibt keinen wirklichen Unterschied. Ich würde den Stil dahin bringen, wo er stilistisch am besten aussieht. Im folgenden Beispiel ist es sinnvoll, cursor:pointer im :hover-Teil zu haben, da .clickable beim Schwebeflug nur anders gestylt ist (d. H. Einen blauen Hintergrund hat). Andernfalls würde ich vorschlagen, es in der normalen .clickable Selektor zu haben.

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; 
}