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>

并且由于两个跨度在示例中具有相同的类名，因此它们都将接收悬停类。

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>