Question

我继承了以下HTML（无法更改），并且已经被委托给CSS悬停，所以它们都有一个新的背景颜色，文本是白色的。我无法让所有这些都改变，并且文本在悬停时是白色的。任何人都可以建议正确的CSS是什么？

不起作用的CSS

ul.dynamic:hover > li.dynamic:hover > a.dynamic:hover >span.additional-background:hover > span.menu-item-text:hover;
ul.dynamic > li.dynamic > a.dynamic > span.additional-background > span.menu-item-text:hover

HTML

<ul class="dynamic">
    <li class="dynamic">
        <a class="dynamic">
            <span class="additional-background">
                <span class="menu-item-text">
                    HomePage
                </span>
            </span>
        </a>
    </li>
</ul>

Answer 1

你可以试试这个

ul.dynamic:hover > li.dynamic:hover > a.dynamic:hover > span.additional-background:hover > span.menu-item-text:hover
{
    background:red;
    color:white;
}

您还可以添加其他任何想要更改的属性。

Js Fiddle Demo

Answer 2

很难说，因为您没有指定哪个元素的CSS需要更改。我将假设background-color的{{1}}需要更改，而span.additional-background的{{1}}文本需要更改，在这种情况下，它看起来像这样：< / p>

color

这些都是不必要的具体，但我认为他们需要为了覆盖你没有向我们展示的现有CSS。实际上，第一个选择器可以是span.menu-item-text，第二个可以是ul.dynamic > li.dynamic > a.dynamic:hover > span.additional-background { background-color: #333; } ul.dynamic > li.dynamic > a.dynamic:hover > span.additional-background > span.menu-item-text { color: #FFF; }。

Answer 3

您无法使用Semicolon(;)组合两种样式。

尝试使用逗号分隔选择器的css样式：

ul.dynamic:hover > li.dynamic:hover > a.dynamic:hover >span.additional-background:hover > span.menu-item-text:hover,
ul.dynamic > li.dynamic > a.dynamic > span.additional-background > span.menu-item-text:hover

In jsfiddle

Answer 4

我们终于让我们的风格看起来像我们想要的方式。我们最终不得不从更高的节点开始，（无论出于何种原因）必须包括以下两行：

.ms-core-listMenu-horizontalBox:hover li.static > ul.static > li.static > .ms-navedit-linkNode:hover,
li.static > ul.static > li.static > a.static > span.additional-background:hover > span.menu-item-text:hover

谢谢大家的帮助！

所有节点上的CSS？

4 个答案: