Question

我想知道如何编写我的CSS，以便当我悬停文本时，黄色框下面的绿线也变为黄色。谢谢

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 2px solid green;
}

#left {
    float: left;
}

#right {
    float: right;
}

a {
    display: block;
    color: black;
    text-align: center;
    padding: 12px 12px;
    text-decoration: none;
}

a:hover {
    background-color: yellow;
}

链接 https://jsfiddle.net/18fk9sce/

我应该补充一点，我希望保留绿线。一些解决方案似乎删除了在页面上运行的绿线。

Answer 1

好的，我现在只是更新了解决方案。

只需将overflow: hidden;中的ul替换为固定height: 42px即可。并通过2px（即border-bottom大小）增加悬停链接的填充底部。这将覆盖链接的黄色边框。

检查更新后的fiddle

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 42px;
  border-bottom: 2px solid green;
}

#left {
  float: left;
}

#right {
  float: right;
}

a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;
}

a:hover {
  background-color: yellow;
  padding-bottom: 14px;
}

Answer 2

您必须在li中设置边框而不是ul，因此您可以单独更改边框。

只需更改样式即可实现：

更新了fiddle

更新后的样式

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;  
}

#left {
  float: left;
}

#right {
  float: right;
}

a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;  
}
li{
  border-bottom: 2px solid green;
}

li:hover {
  background-color: yellow;
  border-bottom: none;//you can set other color here
}

Answer 3

Updated CSS :- 

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#left {
  float: left;
}

#right {
  float: right;
}

a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;
  border-bottom: 2px solid green;
}

a:hover {
  background-color: yellow;
  border-bottom: 2px solid yellow;
}

Answer 4

尝试将此添加到您的css。如果不是这样告诉我

ul:hover{
  border-bottom:1px solid yellow;
}

Answer 5

HTML - 添加了包装器

<div class="menu__holder">
  <ul class="main_menu_left">
    <li id="left"><a href="#Homehome">Homehome</a></li>
    <li id="left"><a href="#Homehomehome">Homehomehome</a></li>
    <li id="left"><a href="#Homehome">Homehome</a></li>
    <li id="right"><a href="#Homehome">Homehome</a></li>
    <li id="right"><a href="#Home">Home</a></li>
  </ul>
</div>

CSS

.menu__holder {
  width: 100%;
  padding: 0;
  border-bottom: 2px solid green;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 9999;
  margin-bottom: -2px;
}

ul li {
  border-bottom: 2px solid transparent;
}

ul li:hover {
  border-color: yellow;
  z-index: 9999;
}

#left {
  float: left;
}

#right {
  float: right;
}

a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;
}

a:hover {
  background-color: yellow;
}

Updated fiddle - NEW

Answer 6

感谢所有为此问题做出贡献的人。

最后这是我使用的代码。

https://jsfiddle.net/4d0ghscu/

<style>
.menu{
height:40px;
border-bottom:4px solid green;
padding:0;}
.menu_left{
display:inline;
list-style-type:none;}
.menu_right{
display:inline;
list-style-type:none;}
.tab_left{
float:left;}
.tab_right{
float:right;}
a{
display:block;
color:black;
padding:12px 12px;
text-decoration:none;}
a:hover{
background-color:yellow;}
</style>

<ul class="menu">
<ul class="menu_left">
<li class="tab_left"><a href="#Homehome">Homehome</a></li>
<li class="tab_left"><a href="#Homehomehome">Homehomehome</a></li>
<li class="tab_left"><a href="#Homehome">Homehome</a></li>
</ul>
<ul class="menu_right">
<li class="tab_right"><a href="#Homehome">Homehome</a></li>
<li class="tab_right"><a href="#Home">Home</a></li>
</ul>
</ul>

代码的关键： *在头顶内左右分离。这使得在导航菜单中添加新元素变得更简单，更灵活。 *增加身高。

悬停时的CSS在/ border-bottom下删除

6 个答案: