1

我将文本包装在由 Javascript 生成的 SPAN 中，并且在生成时包含内联样式。所以像：

<div id="test">
    <span style="color: red">Text 1</span>
    <span style="color: blue">Text 2</span>
    <span style="color: green">Text 3</span>
    ...
</div>

但是，通常我希望所有文本都是一种颜色，并且只有在悬停时才能看到内联定义的特殊颜色。问题当然是，为了覆盖非悬停样式的内联样式，我必须包含!important声明。然后，当我定义:hover样式时，我无能为力。

#test > span {
    color: black !important;
}
#test:hover > span {
    color: inline; // Does not exist!
}

有什么我不知道的选择吗？还是有更好的方法来实现这一目标？

我无法运行 Javascript onmouseover 来添加内联样式，然后删除 onmouseout。以防万一有人想建议。

编辑：

我确实想到了一个疯狂的解决方案：在父 SPAN 中嵌入所有文本 SPAN，给父母内联样式，通过重要标志强制孩子成为统一颜色，然后在悬停时强制孩子inherit离开父母。 ...... 那会起作用的，对吧？还有更优雅的吗？

4

1 回答 1

2

将文本嵌套在另一个跨度中应该可以工作，您可以从父级继承颜色。

就我个人而言，我认为你应该给他们每个班级并在悬停时改变他们的颜色。

像这样：http: //jsfiddle.net/576Ez/

HTML

<div id="test">
    <span class="red hover">Text 1</span>
    <span class="blue hover">Text 2</span>
    <span class="green hover">Text 3</span>
    ...
</div>

CSS

#test .red.hover:hover {
    color: red;
}
#test .blue.hover:hover {
    color: blue;
}
#test .green.hover:hover {
    color: green;
}
于 2013-04-06T06:07:12.457 回答