Question

当鼠标悬停在任何导航元素<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

Answer 1

你必须使用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>

Answer 2

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

使用当前的CSS，您只能向右或向下选择，而不能在DOM中向左或向上选择。（另见：Is there a CSS parent selector?）

+和~都基于元素之间的兄弟关系工作。因此，如果您希望它在悬停整个header元素时做出反应，这只能起作用，因为该部分只是该元素的兄弟。

＆＃13;

header:hover + section {
  outline:5px solid;
}

/* optional: */
/*
header {
  display:inline-block;
}
*/

＆＃13;

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

＆＃13;

如果要限制触发效果的区域，可以使标题内联块 - 然后项目右侧的大部分空间不会对鼠标光标做出反应。要将效果微调到所需的边界，您可以使用所涉及元素的边距和填充。

Answer 3

悬停后定位部分。

nav li:hover section {
border: 1px solid black;
}

菜单项悬停在<section>边框;

3 个答案: