Question

我将文本包装在由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中，为父母提供内联样式，通过重要标志强制孩子成为统一颜色，然后悬停强制孩子到{ {1}}来自父母.......那会有用，对吗？还有什么更优雅的？

Answer 1

将文本嵌套在另一个范围中应该有效，您可以继承父级的颜色。

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

像这样：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;
}

CSS：在悬停时恢复内联样式

1 个答案: