CSS悬停下，删除/下边框

即时知道怎么这样，当我悬停文字下的黄箱绿线变成黄色以及写我的CSS。谢谢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/

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

来源

2016-02-21 raskoon

整个绿线（或）只有文字下一个被徘徊？ – Harry

试试这个：[update_link（https://jsfiddle.net/18fk9sce/1/） –

您可以设置其他的颜色为好。 –

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

来源

2016-02-21 07:39:55

这不起作用？ – Aziz

嗨，棘手的部分是我想绿线跨越页面。 – raskoon

嗨@raskoon - 改变了答案，以反映完整的绿线 - 看到你的想法 - 没有硬编码的高度 –

你必须设置边框的李没有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 
}

来源

2016-02-21 07:32:45

那里没有'li'的边界怎么样？ – Aziz

如果他提到将边界保留在ul下，那么答案将会不同。 –

@FrayneKonok是的，我希望边界仍然显示。抱歉，我没有在原始文章中添加该内容，为了清楚起见，现在进行了编辑 – raskoon

好吧，我刚刚更新的解决方案现在。

只需使用固定的height: 42px替换ul中的overflow: hidden;即可。并增加的填充底部盘旋链路由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; 
}

来源

2016-02-21 07:37:39 kabirbaidhya

感谢您的回复良好的解决方案，但绿线不再贯穿整个页面。 – raskoon

@raskoon我刚刚更新了上面的解决方案，现在可以工作。请检查 – kabirbaidhya

嗨，感谢您的回复，很好的解决方案。 – raskoon

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

来源

2016-02-21 07:39:02

尝试添加以下内容到css.if不是这种情况下告诉我

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

来源

2016-02-21 07:39:28

感谢您的回复，这只是我不希望整条线改变颜色。只有黄色框下的小部分。 – raskoon

-1

感谢大家谁对这个问题作出了贡献。

到底

这是我使用的代码。

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>

关键代码： *分离权的开销内离开。这使得向导航菜单添加新元素变得更加简单和灵活。 *增加高度。

来源

2016-02-26 08:31:21 raskoon

CSS悬停下，删除/下边框

回答

相关问题