Почему не работает :hover css?

Question

[historydev]

.letters a:hover + .container .names #one{
	box-shadow: 0 0 20px 3px rgba(255,153,51,.3);
}

<div class="n_list" id="one">
									<div class="n_title">#</div>
									<div class="n">
									<div class="n_name">10 причин моей ненависти</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">10 причин моей ненависти</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">10 причин моей ненависти</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">10 причин моей ненависти</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">10 причин моей ненависти</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Lorem ipsum its cool fish words</div>
									<div class="n_name">Скрыть<div class="fas fa-caret-up"></div></div>
									<div class="n_name">Показать всё<div class="fas fa-caret-down"></div></div>
                                    </div>		
									
							
								</div>

Comments

[RAX7]

Потому что селектор не соответствует разметке

[historydev]

RAX7, а как он выглядит когда соответствует?

[RAX7]

HistoryART, ну как минимум в разметке есть блок с классом letters.

[historydev]

RAX7, я вижу так, при наведении на элемент .Х в классе .Х, я меняю стили элемента вне класса .Х добавляя + после обработчика

[historydev]

RAX7,
Вот

.letters a:hover + .names #one{
  box-shadow: 0 0 20px 3px rgba(255,153,51,.3);
}

[strelok011]

Для начала следует изучить, как работает знак +, какие еще бывают варианты составления каскадов

https://www.w3.org/TR/CSS21/selector.html#adjacent...

Если по простому, то '+' указывает на следующий элемент после указанного в каскаде.
Т.е. .letters a:hover - это тег a, лежащий в контейнере с классом .letter а указатель + подразумевает, что обращение идет к следующему непосредственно за тегом а, с одним общим родителем. Т.е. тег с классом .names должен идти сразу за тегом a и находиться внутри .letters

Если между тегами будет что-то иное, другие теги, или они окажутся в разных контейнерах, то этот каскад не сработает.