$('.block-content a').hover(function() { $('.block-name span:nth-of-type(2)').css('width', '100%'); }, function() { $('.block-name span:nth-of-type(2)').css('width', '60%'); }); 
 <div class="block-content"> <div class="block-name"> <img src="/img/block1.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#"></a> </div> <div class="block-content"> <div class="block-name"> <img src="/img/block2.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#"></a> </div> <div class="block-content"> <div class="block-name"> <img src="/img/block3.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#"></a> </div> <div class="block-content"> <div class="block-name"> <img src="/img/block4.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#"></a> </div> <div class="block-content"> <div class="block-name"> <img src="/img/block5.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#"></a> </div>

There are 5 blocks, when you hover over a link in one of them on all other spans, it becomes 100% wide, how to make the function run only in the block that contains the link?

  • Show excerpt html with links - Yuri

1 answer 1

From the links, you turn to the nearest common parent, and from there to the very span

 $(function() { $('.block-content a').hover(function() { $(this).closest('.block-content').find('.block-name span:nth-of-type(2)').css('width', '100%'); }, function() { $(this).closest('.block-content').find('.block-name span:nth-of-type(2)').css('width', '60%'); }); }); 
 .block-name span {display:block; width: 60%; height: 15px; margin: 5px 0; background-color:black;color:white;} 
 <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <div class="block-content"> <div class="block-name"> <img src="/img/block1.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#">Ссылка</a> </div> <div class="block-content"> <div class="block-name"> <img src="/img/block2.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#">Ссылка</a> </div> <div class="block-content"> <div class="block-name"> <img src="/img/block3.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#">Ссылка</a> </div> <div class="block-content"> <div class="block-name"> <img src="/img/block4.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#">Ссылка</a> </div> <div class="block-content"> <div class="block-name"> <img src="/img/block5.png"> <span></span> <span></span> </div> <div class="block-text"> <p>Lorem</p> </div> <a href="#">Ссылка</a> </div>

  • better closest - Grundy
  • Thank you, in the future I will know how to solve such problems! - Voo
  • @Voo, changed to your html - Yuri