Question

我在#header悬停时尝试更改.nav-link a 身高。我搜索了信息，它主要是为了影响子元素，我还没想出如何影响元素之外的东西。

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

如果由于某种原因你不知道标题的ID，但是你知道目标距事件发生的项目还有多远，你也可以这样做：

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

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

在悬停时，更改另一个不在附近的元素

1 个答案: