html - css - hover - クラス全体ではなく、そのクラスのホバーされたアイテムのみに影響を与える

Question

私はこれをやっています：

CSS :

.classname:hover { 
     color: green; 
}

HTML :

<div>
    <span class="classname">Hi</span>
    <span class="classname">Bye</span>
</div>

ホバーすると、そのクラスのすべての要素が緑色で表示されますが、ホバーしたものだけを緑色にしたい

Answer 1

クラスにドット (.) は必要ありません。

<div>
    <span class="classname">Hi</span><span class="classname">Bye</span>
</div>

この例では、両方のスパンが同じクラス名を持っているため、両方とも hover クラスを受け取ります。

Answer 2

CSS :

.class2:hover { 
    color: green; 
}

HTML :

<div>
    <span class="class1">Hi</span><span class="class2">Bye</span><span class="class2">Test</span>
</div>