CODEWITHSUNDEEP
jqueryhtmlcss
bryan
bryan

Reputation: 9369

On hover, change another element that is not near

I'm attempting to change #header height when .nav-link a is hovered. I've searched information and it's mostly for affecting child elements and I haven't figured out how to affect something outside of the element.

<div id="header">
    <ul>
        <li class="nav-link"><a href="#1">Item 1</a></li>
        <li class="nav-link"><a href="#2">Item 2</a></li>
        <li class="nav-link"><a href="#3">Item 3</a></li>
    </ul>
</div>

Upvotes: 0

Views: 86

Answers (1)

Fhtagn
Fhtagn

Reputation: 773

With jQuery: 

$(document).ready(function(){
  $('.nav-link a').on('mouseover', function(){
    $('#header').css('height', '500px');
  });
});

https://jsfiddle.net/pmyrLvxc/1/

If you don't know the ID of the header for some reason, but you know how far above the target is from the item the event occurs on, you can also do:

$(this).parent().parent().css('height', '500px');

https://jsfiddle.net/pmyrLvxc/3/

Upvotes: 1

Related Questions