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

Я унаследовал следующий HTML (который не может быть изменен), и ему было поручено CSS навести курсор, чтобы все они имели новый цвет фона, а текст белый. Я не могу заставить их всех меняться, а текст будет белым при наведении указателя мыши. Может ли кто-нибудь сообщить, какой будет правильный 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>

источник

2013-11-12 JaeEmAre

Каким элементом вы конкретно пытаетесь изменить цвет и цвет фона? – Ennui

Все они. Я хочу, чтобы у UL, LI, A, SPAN у всех был новый цвет фона и единственный текст (в SPAN), чтобы иметь forecolor как белый. – JaeEmAre

Вы можете просто попробовать это

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

источник

2013-11-12 14:22:27 Sachin

Спасибо. Я пробовал именно то, что у вас есть, и все они не имеют цвета фона и не меняют цвет шрифта. – JaeEmAre

Трудно сказать, потому что вы не уточняя, которые 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-12 14:25:20 Ennui

Спасибо. Нам нужны все элементы для изменения цвета фона и единственного текста для изменения цвета переднего плана. Я скопировал это в свой CSS, и он все еще не работает. Я продолжу исследования. – JaeEmAre

Можете ли вы отредактировать сообщение, чтобы включить CSS-код, который устанавливает свойства этих элементов? Это актуально, поскольку нам необходимо обеспечить, чтобы стили, которые мы предоставляем, достаточно конкретны, чтобы переопределить старые стили при наведении. – Ennui

Вы не можете использовать 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

источник

2013-11-12 14:28:14

Спасибо. Это была печальная опечатка с моей стороны. В фактическом коде он разделяется только запятыми. – JaeEmAre

Мы наконец получили наш стиль, чтобы посмотреть, как мы хотели, чтобы на этом. Мы закончили тем, что для запуска на более высоком узле и (по какой-либо причине) пришлось включить обе из следующих строк:

.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-13 20:24:48 JaeEmAre

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

ответ

Смежные вопросы