2

Есть конструкция типа

<ul>
  <li>
    <a href="#">123</a>
    <div class="qwerty">456</div>
  </li>
  <li>
    <a href="#">123</a>
    <div class="qwerty">456</div>
  </li>
  <li>
    <a href="#">123</a>
    <div class="qwerty">456</div>
  </li>
</ul>

Надо что бы при наведении на ссылку показывался блок, как к нему обратиться можно через jquery?

1 ответ 1

3

Например с помощью .next():

$('a').hover(
  function(){ $(this).next('.qwerty').show()},
  function(){ $(this).next('.qwerty').hide()}
);
.qwerty {
  display: none;
}
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>

  <ul>
  <li>
    <a href="#">123</a>
    <div class="qwerty">456</div>
  </li>
  <li>
    <a href="#">123</a>
    <div class="qwerty">456</div>
  </li>
  <li>
    <a href="#">123</a>
    <div class="qwerty">456</div>
  </li>
</ul>

а, вообще, можно и просто css:

.qwerty {
  display: none;
}

a:hover~.qwerty,
.qwerty:hover {
  display: block;
}
<ul>
  <li>
    <a href="#">123</a>
    <div class="qwerty">456</div>
  </li>
  <li>
    <a href="#">123</a>
    <div class="qwerty">456</div>
  </li>
  <li>
    <a href="#">123</a>
    <div class="qwerty">456</div>
  </li>
</ul>

2
  • Отлично, спасибо) Еще вопросик, а как сделать, что бы элемент не пропадал сразу как отводишь курсор с ссылки, а пропадал когда уводишь с скрываемого елемента 21 ноя 2016 в 21:14
  • a:hover~.qwerty, .qwerty:hover {display: block;}
    – SVE
    21 ноя 2016 в 21:39

Ваш ответ

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

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