1

В коде указано, что когда навожу на ссылку, должен появляться класс. Но код не работает, хотя когда ставлю в CSS наведение на целый класс .callback, а не на отдельную ссылку, то всё нормально. Как сделать, чтобы при наведении на ссылку выводился .city-menu?

.callback {
    position: relative;
}

.city-menu {
    position: absolute;
    opacity: 0;
    display: flex;
    flex-direction: column;
    
  
}

.callback a:hover .city-menu {
    opacity: 1;
    top: 1;
}
<div class="callback"><p>Ваш город:
                            
                                <br><a href="#">Киев</a>
                                    <div class="city-menu">
                                      <ul>
                                         <li><a href="#">Киев</a></li>
                                         <li><a href="#">Киев</a></li>
                                         <li><a href="#">Киев</a></li>
                                      </ul>
                                    </div>
                                
                                
                            </p></div>

1
  • Вам поможет cелектор следующего элемента ~ 1 ноя 2019 в 18:20

2 ответа 2

0

Вы вешаете hover на класс .callback + линк , но в вашем html, внутри етого класса сначало идет p, а потом ссылка. Вам надо добавить .callback p a, или сделать как в примере ниже.А в общем никто не пихает в p все сразу и ссылки,списки,блоки.Сделайте нормальную структуру!

.callback {
    position: relative;
}

.city-menu {
    position: absolute;
    opacity: 0;
    display: flex;
    flex-direction: column;
    
  
}

.callback:hover .city-menu {
    opacity: 1;
    top: 1;
}
<div class="callback"><p>Ваш город:
                            
                                <br><a href="#">Киев</a>
                                    <div class="city-menu">
                                      <ul>
                                         <li><a href="#">Киев</a></li>
                                         <li><a href="#">Киев</a></li>
                                         <li><a href="#">Киев</a></li>
                                      </ul>
                                    </div>
                                
                                
                            </p></div>

2
  • Поправил структуру, сделав отдельно параграф и снизу ссылку, однако всё равно ничего не работает. Повторюсь, мне не нужно, чтобы при наведении на класс выводился другой класс, мне нужно, чтобы при наведении на ссылку выводился нужный класс.
    – dhwind
    2 ноя 2019 в 12:10
  • Не совсем понял что вы хотите, в моем примере когда вы наводите на ваш город Киев, выводиться список!Как вам надо? 2 ноя 2019 в 14:00
0

В вашем примере две ошибки:

1) тег p автоматически закрывается перед следующим блочным элементом. В данном случае перед <div class="city-menu">.

В инспекторе браузера можно увидеть следующую структуру

<div class="callback">
    <p>Ваш город:
        <br>
        <a href="#">Киев</a>
    </p>
    <div class="city-menu">
        <ul>
            ...
        </ul>
    </div>
</div>

2) Такой селектор .callback a:hover .city-menu выбирает теги с классом city-menu, которые находятся внутри тега a на который наведен курсор. В данной разметке нет подходящих условий.

Вот вариант решения проблемы:

.callback {
  position: relative;
}

.city-menu {
  position: absolute;
  opacity: 0;
  display: flex;
  flex-direction: column;
}

.callback a:hover + .city-menu {
  opacity: 1;
  top: 1;
}
<div class="callback">
  <div>Ваш город:

    <br><a href="#">Киев</a>
    <div class="city-menu">
      <ul>
        <li><a href="#">Киев</a></li>
        <li><a href="#">Киев</a></li>
        <li><a href="#">Киев</a></li>
      </ul>
    </div>


  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.