如何在 W3.CSS 中删除部分边框

Question

所以，我正在使用 W3.CSS 开发一个项目，我有这部分菜单代码，如下所示：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
                <div class="w3-bar w3-khaki w3-card w3-bottombar w3-border-orange">
                    <a class="w3-bar-item w3-button w3-hover-white w3-right w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="menu"><i class="fa fa-bars"></i></a>
                    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small w3-topbar w3-border-khaki w3-hover-border-orange">Menu1</a>
                    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu2</a>
                    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu3</a>
                    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu4</a>
                  </div>
</div>
</body>

这是它的样子：

当我将鼠标悬停在某个项目上并 select 它时，它看起来像这样：

这几乎没问题，但我需要能够隐藏 selected 按钮的底部边框，使它看起来或多或少像这样：

我唯一的想法是使用一些 JavaScript 相应地绘制底部边框，但这听起来比我想象的要复杂得多。还有其他我不知道的更好的解决方案吗？

Answer 1

有很多方法可以实现这一点，这里是其中之一，我希望这是你想要的。如果还需要什么，请告诉我。我刚刚在悬停后放置了一个伪元素，它隐藏了下面的边框。所以你不需要 nay JavaScript 。

.atul {
  background: orange;
  padding: 100px;
}

.w3-border-orange {
  border-top: 1px solid;
  border-bottom: 5px solid red;
 
}

.w3-border-orange a {
  display: inline-block;
  text-decoration: none;
  margin-right: 15px;
  padding: 5px;
  position:relative;
  border-top: 5px solid transparent;
}

.w3-border-orange a:hover {
  border-top: 5px solid red;
  background: #fff;
}


.w3-border-orange a:hover:after {
  position: absolute;
  height: 5px;
background: #fff;
content: "";
top: 100%;
width :100%;
left: 0;
}

<div class="atul"> 
<div class="w3-bar w3-khaki w3-card w3-bottombar w3-border-orange">
    <a class="w3-bar-item w3-button w3-hover-white w3-right w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="menu"><i class="fa fa-bars"></i></a>
    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small w3-topbar w3-border-khaki w3-hover-border-orange">Menu1</a>
    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu2</a>
    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu3</a>
    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu4</a>
  </div>
</div>

Answer 2

除非我能看到 css 代码，否则无法给你正确的解决方案，如果你能 post 在 codepen 或我能看到代码的地方会更好。

根据您的代码，您可能可以在悬停时做一些 css 更改，使用 padding-bottom 来修复 。

如何在 W3.CSS 中删除部分边框

How to remove part of a border in W3.CSS

html

css

w3.css