Hover работает в одном случае, но не в другом

Question

Отлично работает следующий фрагмент кода HTML и CSS:

.dropdown:hover .features-menu{
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;
  top: 50px;
  left: 50px;

}

<li class='dropdown'>Features ▾
  <ul class='features-menu'>
    <li><a href='#'>Harder</a></li>
    <li><a href='#'>Better</a></li>
    <li><a href='#'>Faster</a></li>
    <li><a href='#'>Stronger</a></li>
  </ul>
</li>

Но если я попытаюсь заключить текст Features в span или div, то есть

<li class='dropdown'><span>Features ▾</span>

и внесите следующие изменения в мой CSS относительно hover

.dropdown span:hover .features-menu{
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;
  top: 50px;
  left: 780px;

}

Наведение больше не рендерится.Почему этот метод не работает?Я подумал, может быть, это потому, что span был встроенным элементом, но затем я попробовал его также с div, и он все равно не смог отрендерить.

Answer 1

Чтобы ответить на ваш вопрос, вам нужно больше понять CSS-селекторы.

Давайте объясним первый (рабочий CSS-селектор) .dropdown:hover .features-menu = Выбрать все элементы с классом dropdown, когда они находятся в состоянии hoverи настройте свойства для features-menu class внутри , которые .dropdown

Теперь второй CSS .dropdown span:hover .features-menu читает: Выбрать все span элементы в классе dropdown, когда они находятся в состоянии hover и настройке свойств для features-menu класса внутри , что .dropdown span

Поскольку в вашем рабочем примере элемент .dropdown включает .features-menu, все в порядке.Но во втором случае .dropdown span элемент не включает .features-menu

Использование селектора «брат» может помочь здесь:

.dropdown span:hover ~ .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;
  top: 50px;
  left: 50px
}

<li class='dropdown'><span>Features ▾</span>
  <ul class='features-menu'>
    <li><a href='#'>Harder</a></li>
    <li><a href='#'>Better</a></li>
    <li><a href='#'>Faster</a></li>
    <li><a href='#'>Stronger</a></li>
  </ul>
</li>

Answer 2

Ваш оригинальный CSS должен работать с новым <span>.Селектор CSS для наведения, .dropdown:hover .features-menu по-прежнему будет нацелен на родительский элемент <span>, что означает, что эффект наведения все еще должен работать, поскольку родительский элемент все еще существует.

Я поместил это накодовый блок для демонстрации: https://codepen.io/littlefinger42/pen/ebWYJP

Answer 3

Предположим, что так выглядит ваша разметка:

<li class='dropdown'><span>Features ▾</span>
  <ul class='features-menu'>           
  <li><a href='#'>Harder</a></li>
  <li><a href='#'>Better</a></li>
  <li><a href='#'>Faster</a></li>
  <li><a href='#'>Stronger</a></li>
  </ul> 
</li>  

наведение больше не отображается.Почему этот метод не работает?Я подумал, может быть, это потому, что span был встроенным элементом, но затем я попробовал его и с div, и он все равно не смог отрендерить.

Это объявление CSS: .dropdown span:hover .features-menu будет применяться только к .features-menu, которыйявляется дочерним элементом span.Однако в этом случае .features-menu является родственным элементом span, и поэтому он не работает.

Вместо этого можно попробовать использовать соседний селектор брата (+) :

.dropdown span:hover + .features-menu{
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;      
  top: 50px;
  left: 780px;

}

Или просто не вносите никаких изменений в предыдущую декларацию CSS:

.dropdown:hover .features-menu{
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;      
  top: 50px;
  left: 780px;
}