There is a type design

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

It is necessary that when you hover over a link, a block is shown, how can you access it via jquery?

    1 answer 1

    For example using .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>

    but, in general, you can and just 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>

    • Great, thanks) Another question, but how to make the element disappear as soon as you move the cursor away from the link, and disappear when you take it away from the hidden element - Victor
    • a:hover~.qwerty, .qwerty:hover {display: block;} - HamSter