Question

我正在尝试创建一个导航栏，默认情况下它具有某种颜色的border-top，当悬停或活动时，我想要另一种颜色。

有什么方法可以让我这样做吗？

我试过了：

absolute
z-index

但不适合我。

.navbar {
    background-color: #ecf0f1;
}
.navbar > .main-nav > ul,li {
    list-style-type: none;
    text-decoration: none;
}
.navbar > .main-nav > ul {
    min-height: 60px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ecf0f1;
    border-top: 5px solid #d1d064;
    box-sizing:border-box;
}
.navbar > .main-nav > ul > li {
    text-align: center;
    min-width: 150px;
}
.navbar > .main-nav > ul > li > a {
    display: block;
    color: #737373;
    text-align: center;
    padding: 20px 16px;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-weight: 800;
}
.navbar > .main-nav > ul > li.active {
    border-top: thick solid #0F9E5E;
}
.navbar > .main-nav {
    max-width: 1480px;
    margin: 0 auto;
}

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css" rel="stylesheet">
</head>  
<nav class="navbar">
        <div class="main-nav">
            <ul>
                <li class="active hvr-sweep-to-top"><a href="#">Home</a></li>
                <li class="hvr-overline-from-center"><a href="#">Second</a></li>
                <li class="hvr-overline-from-center"><a href="#">Third</a></li>
            </ul>
        </div>
    </nav>

编辑：意外地附上了错误的代码，我现在已经修好了。

Answer 1

尝试使用box-shadow
默认或inset

示例：

box-shadow: 0 -10px 0 0 red;

或

box-shadow: inset 0 -10px 0 0 red;

或组合

box-shadow: 0 -10px 0 0 red, 10px 0 0 blue, inset 10px 0 0 green;

结合边框，你应该得到理想的效果。

Answer 2

您可以设置$(document).ready(function() { $('#side').hide() }), $("#btn").click(function() { $('#main').toggleClass('two-thirds'); $("#side").toggle(1000); });标记样式以占用其父项的整个空间并在其上放置（活动）边框，而不是制作<li>标记.active。然后在<a>上，在:hover标记上添加另一个边框 - 它会显示在顶部。为了避免大小跳跃，请为<li>提供一些透明边框，其大小与您在<li>上提供的边框大小相同

:hover

Answer 3

删除margin-top并为元素li.active和li：hover

上的边框样式添加！important

检查此代码段

＆＃13;

.navbar {
  background-color: #ecf0f1;
}
.navbar > .main-nav > ul,
li {
  list-style-type: none;
  text-decoration: none;
}
.navbar > .main-nav > ul {
  padding-top: 1px;
  min-height: 60px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ecf0f1;
  border-top: 7px solid #d1cf82;
  box-sizing: border-box;
  z-index: -1;
}
.navbar > .main-nav > ul > li {
  text-align: center;
  min-width: 150px;
}
.navbar > .main-nav > ul > li > a {
  display: block;
  color: #737373;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-weight: 800;
}
.navbar > .main-nav > ul > li.active {
  border-top: thick solid #0F9E5E !important;
  box-sizing: border-box;
  z-index: 1;
}
.navbar > .main-nav > ul > li:hover {
  border-top: thick solid #fff !important;
}
.navbar > .main-nav {
  max-width: 1480px;
  margin: 0 auto;
}

＆＃13;

<nav class="navbar">
  <div class="main-nav">
    <ul>
      <li class="active"><a href="#">Home</a>
      </li>
      <li><a href="#">Second</a>
      </li>
      <li><a href="#">Third</a>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

希望有所帮助

Answer 4

in_array('email@email.com', $blacklistArray);

Answer 5

如果您向透明的li添加边框，则根据活动或悬停来更改其颜色

注意，我清理了一些代码，然后删除margin-top: -5px;上的li，因为它隐藏了第一个项目的顶部边框

.navbar {
  background-color: #ecf0f1;
}
.navbar > .main-nav > ul,
li {
  list-style-type: none;
  text-decoration: none;
}
.navbar > .main-nav > ul {
  min-height: 60px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.navbar > .main-nav > ul > li {
  border-top: thick solid transparent;
  text-align: center;
  min-width: 150px;
}
.navbar > .main-nav > ul > li a {
  display: block;
  color: #737373;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-weight: 800;
}
.navbar > .main-nav > ul > li.active {
  border-top-color: #0F9E5E;
}
.navbar > .main-nav > ul > li:hover {
  border-top-color: #fff;
}
.navbar > .main-nav {
  max-width: 1480px;
  margin: 0 auto;
}

<nav class="navbar">
  <div class="main-nav">
    <ul>
      <li class="active"><a href="#">Home</a>
      </li>
      <li><a href="#">Second</a>
      </li>
      <li><a href="#">Third</a>
      </li>
    </ul>
  </div>
</nav>

如何在css中的另一个边框顶部获得边框？

5 个答案: