Question

我正在网站上的导航菜单上工作，因此我想这样做，因此当前页面的按钮周围会有一个1px的纯白色边框，例如，如果我在About页面上，关于按钮周围的白色边框。我已经为悬停做了这个，现在我需要一个人来帮助我在如上所述的当前页面上完成它。

edit：我忘了提到html代码是从我的母版页上提取的，因此我在每个页面上都没有此代码。还有办法吗？

这是我为悬停所做的（就像我想要的那样工作）：

.main-nav li a:hover {
    background-color: white;
    color: #266EB8;
    border: 1px solid white;
}

这是我的html：

<header>
   <div class="row">
        <ul class="main-nav">
            <li class="active"><a href="HomePage.aspx">HOME</a></li>
            <li><a href="GalleryPage.aspx">GALLERY</a></li>
        <li><a href="AboutPage.aspx">ABOUT</a></li>
        <li><a href="RegistrationPage.aspx">REGISTRATION</a></li>
        <li><a href="ContactUsPage.aspx">CONTACT US</a></li>
    </ul>
</div>

希望你能理解我。

Answer 1

您只需要将活动类向下移动到当前页面的锚点即可。即关于About将会是：

body {
  background-color: #AAA;
}

.main-nav li a:hover,
.main-nav .active a {
  background: white;
  color: #266eb8;
  border: 1px solid white;
}

<header>
  <div class="row">
    <ul class="main-nav">
      <li><a href="HomePage.aspx">HOME</a></li>
      <li><a href="GalleryPage.aspx">GALLERY</a></li>
      <li class="active"><a href="AboutPage.aspx">ABOUT</a></li>
      <li><a href="RegistrationPage.aspx">REGISTRATION</a></li>
      <li><a href="ContactUsPage.aspx">CONTACT US</a></li>
    </ul>
  </div>
</header>

在导航菜单的活动页面周围添加白色边框

1 个答案: