0

我继承了以下 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>
4

4 回答 4

2

你可以简单地试试这个

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

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

Js 小提琴演示

于 2013-11-12T14:22:27.320 回答
0

很难说，因为您没有指定需要更改哪个元素的 CSS。我将假设需要更改的内容background-color和span.additional-background需要更改的文本color，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;
}

这两个都是不必要的具体，但我假设他们需要为了覆盖你没有向我们展示的任何现有 CSS。真的，第一个选择器可能只是a.dynamic:hover > span，第二个可能是a.dynamic:hover > span > span。

于 2013-11-12T14:25:20.367 回答
0

你不能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

在 jsfiddle

于 2013-11-12T14:28:14.653 回答
0

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

.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

谢谢大家的帮助！

于 2013-11-13T20:24:48.387 回答