html - 菜单项悬停在<section>边框中；

当鼠标悬停在任何导航元素<a>等上时，如何在我的部分上绘制边框？
我试图找到解决方案，但没有+。 〜为我工作。

<div class="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="#">BAC</a></li>
        <li><a href="#">CAD</a></li>
        <li><a href="#">EEE</a></li>
        <li class="image">
          <a href="index.html"><img src="img/logo.png"></a>
        </li>
      </ul>
    </nav>
  </header>
  <section class="content">
    CONTENT
  </section>
</div>

有人可以共享一些CSS代码来执行此操作吗？那将是真棒 ！

解决方案：使用jQuery

$(document).ready(function(){
    $(function() {
            $('li').hover(function() {
                $('.content').css('outline', 'solid 5px');
        }, function() {
            $('.content').css('outline', '');
      });
    });
});

多数民众赞成在我的脚本，但您可以找到替代的@below

最佳答案

您必须为此使用javascript。如果该节是锚标记的后继项或同级项，则CSS只能这样做。 See here进行解释。

我用一些jQuery来做你需要的。随意调整。

$(function(){
  //On hover of nav anchor add red border
  $('nav a').hover(function(){
    $('.content').css('border', '1px solid red');
  });

  //Clear the css we added
  $('nav a').mouseout(function(){
   $('.content').css('border', '');
  })
});

#test:hover + .content {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header>
    <nav>
      These will only work with some javascript/jquery.
      <ul>
        <li><a href="#">BAC</a></li>
        <li><a href="#">CAD</a></li>
        <li><a href="#">EEE</a></li>
        <li class="image">
          <a href="index.html"><img src="img/logo.png"></a>
        </li>
      </ul>
    </nav>
  </header>
  <!-- This works with css. + . ~ only work if the tags are siblings, decendents etc -->
  <a href="#" id="test">This works with css because it's a sibling</a>
  <section class="content">
    CONTENT
  </section>
</div>

关于html - 菜单项悬停在<section>边框中；，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42729277/