Как обратится к елементу, jquery

437

24 ноября 2016, 09:49

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

<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?

Answer 1

Например с помощью .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>