css - hover - 效果只悬停该类的项目而不是整个类答案

【问题标题】：css - hover - effect only hovered item of that class instead of whole classcss - hover - 效果只悬停该类的项目而不是整个类
【发布时间】：2013-11-11 10:31:54
【问题描述】：

我正在这样做：

CSS：

.classname:hover { 
     color: green; 
}

HTML：

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

当我悬停时，该类的所有元素都显示为绿色，但我只希望悬停的元素显示为绿色

【问题讨论】：

<span class=".classname"> 从类名中删除点
另外，最好使用十六进制值而不是人类可读的颜色名称。 IE: .classname:hover { 颜色: #00FF00; }
看这个小提琴：FIDDLE
第一：使用您的示例代码，没有什么是绿色的。你在你的css中调用一个类，它不存在。所以删除点（正如@Deekey 已经说过的那样）。第二：我不明白你的问题。当所有类名都正确时，悬停也将正确工作。使用您的代码，只有悬停的那个会被着色！
那是一个错字，哈哈，我把点放在stackoverflow而不是我的代码中:)

标签： html css hover

【解决方案1】：

您不想在类中使用点 (.)：

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

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

【讨论】：

【解决方案2】：

CSS：

.class2:hover { 
    color: green; 
}

HTML：

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

【讨论】：

使用该解决方案，您会生成不必要的 css 代码。当两者具有相同的 CSS 时，只有悬停的会被着色。自己试试吧：codepen.io/anon/pen/KCJmy
:)..我明白..考虑到<span class=".classname"，我给了两个类以便他理解，我们可以使用不同的类名..