jquery - 悬停时，更改另一个不靠近的元素

Question

当 .nav-link a 悬停时，我正在尝试更改 #header height。我已经搜索了资料，它主要是为了影响子元素，我还没有想出如何影响元素之外的东西。

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

Answer 1

使用 jQuery:

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

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

如果由于某种原因您不知道 header 的 ID，但您知道目标距事件发生的元素多远，您还可以执行以下操作:

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

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