CSS на всех узлах?

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>
  • 0
    Какой элемент конкретно вы пытаетесь изменить color и color background-color ?
  • 0
    Все они. Я хочу, чтобы UL, LI, A, SPAN имели новый цвет фона, а единственный текст (в SPAN) должен иметь основной цвет белого цвета.
Теги:

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 Fiddle

Поделиться
  • 0
    Спасибо. Я попробовал именно то, что у вас есть, и все они не имеют цвет фона и не меняют цвет шрифта.
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

Спасибо всем за вашу помощь!

Поделиться
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

Поделиться
  • 0
    Спасибо. Это была просто опечатка с моей стороны. В реальном коде он разделяется только запятыми.
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.

Поделиться
  • 0
    Спасибо. Нам нужны все элементы для изменения цвета фона и единственный текст для изменения цвета переднего плана. Я скопировал это в свой CSS, и он все еще не работает. Я буду продолжать исследования.
  • 0
    Можете ли вы отредактировать свой пост, включив в него CSS-код, который устанавливает свойства этих элементов? Это актуально, так как мы должны убедиться, что предоставленные нами стили достаточно специфичны, чтобы переопределять старые стили при наведении.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню