悬停背景显示不正确？
Posted
技术标签:
【中文标题】悬停背景显示不正确？【英文标题】：Hover background not showing correctly? 【发布时间】：2014-05-07 19:15:30 【问题描述】：我想实现这个：
这是我实现的：LINK
当您将鼠标悬停在导航链接上时，应该会出现底部带有蓝色边框的白色背景。它看起来不正确。为什么会这样？
标记：
<header>
<div>
<h1>CertsPlan</h1>
<section>
<ul>
<li><a href="javascript:void(0)">+ All Vendors</a></li>
<li>
<article id="header-cart">
<img src="img/cart-icon.png" > 000
</article>
</li>
<li>
<article id="header-search">
<form action="#">
<input type="text" name="search" value="Exam Code">
</form>
</article>
</li>
<li><a href="javascript:void(0)">Sign In/Register</a></li>
</ul>
</section>
<nav>
<ul>
<li><a href="index.html"><img src="img/home.png" ></a></li>
<li><a href="javascript:void(0)">Bundle</a></li>
<li><a href="javascript:void(0)">Faqs</a></li>
<li><a href="javascript:void(0)">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
CSS：
/* Global Styles */
body
border-top: 2px solid #ffffff;
background: #ffffff;
font-family: 'Arial', sans-serif;
color: #57616a;
p
margin: 5px 0;
line-height: 25px;
strong
font-weight: bold;
/* Section Styles */
/* Header */
header
width:auto;
margin: 2 auto 0 auto;
background-color: #f7f7f7;
border-bottom: solid 5px #dedede;
header div
width:auto;
max-width:1040px;
margin: auto;
overflow: hidden;
header h1
font-size: 30px;
font-weight: 400;
color: #2a323a;
font-family: 'PT Sans', sans-serif;
vertical-align: middle;
margin-top: 30px;
margin-bottom: 25px;
float:left;
/* Navigation */
nav
float:right;
margin:none;
header ul
list-style:none;
margin: 0;
overflow: hidden;
nav ul li
display: block;
float: left;
margin-top: 38px;
margin-bottom: 35px;
nav ul li a
font-family: 'PT Sans', sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
color: #2a323a;
padding: 38px 20px 35px 20px;
text-decoration:none;
nav ul li a:hover
background-color: #ffffff;
border-bottom: solid 5px #00acdd;
ul li a:active
background-color: #ffffff;
border-bottom: solid 5px #00acdd !important;
/* Header top right area */
header section
float:right;
header section li
display:block;
float:right;
margin: 37px 0px 28px 7px;
header section a
padding: 10px;
background: #31bbe2;
font-family: 'PT Sans', sans-serif;
font-size: 12px;
font-weight: 400;
color: #ffffff;
text-decoration:none;
border-radius: 5px;
【问题讨论】：
【参考方案1】：您在两个父元素上有overflow: hidden，它隐藏了边框之间的所有内容：（图像上的蓝色）a 标签上的蓝色边框超出了父级的边框。
解决办法如下：
-
应从
header div 中删除overflow: hidden，并添加min-height: 89px。
也从header ul 中删除overflow: hidden。
在nav ul li a 中将padding 更改为：38px 20px 33px。
就是这样。
编辑：
如果你想让它在调整浏览器大小时也能正常工作，而不是像这样在nav 之后添加div：
<nav>
[...]
</nav>
<div class="clear"></div>
clear div 的样式：
.clear
clear: both;
display: table;
【讨论】：
这是一个工作示例：Code-Pen。注意：如果调整浏览器大小，这将不起作用。 完美运行。谢谢！我已经在我的链接上更新了结果。【参考方案2】：<style>
/* Global Styles */
body
border-top: 2px solid #ffffff;
background: #ffffff;
font-family: 'Arial', sans-serif;
color: #57616a;
p
margin: 5px 0;
line-height: 25px;
strong
font-weight: bold;
/* Section Styles */
/* Header */
header
width:auto;
margin: 2 auto 0 auto;
background-color: #f7f7f7;
border-bottom: solid 5px #dedede;
height: 93px;
header div
width:auto;
max-width:60%;
margin: auto;
overflow: hidden;
header h1
font-size: 30px;
font-weight: 400;
color: #2a323a;
font-family: 'PT Sans', sans-serif;
vertical-align: middle;
margin-top: 30px;
margin-bottom: 25px;
float:left;
/* Navigation */
nav
float:right;
margin:none;
header ul
list-style:none;
margin: 0;
overflow: hidden;
nav ul li
display: block;
float: left;
margin-top: 38px;
margin-bottom: 35px;
nav ul li a
font-family: 'PT Sans', sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
color: #2a323a;
padding: 38px 20px 35px 20px;
text-decoration:none;
nav ul li a:hover
background-color: #ffffff;
border-bottom: solid 8px #00acdd;
ul li a:active background-color: #ffffff; border-bottom: solid 5px #00acdd !important;
/* Header top right area */
header section
float:right;
header section li
display:block;
float:left;
margin: 37px 0px 28px 7px;
header section a
padding: 10px;
background: #31bbe2;
font-family: 'PT Sans', sans-serif;
font-size: 12px;
font-weight: 400;
color: #ffffff;
text-decoration:none;
border-radius: 5px;
</style>
<header>
<div>
<h1>CertsPlan</h1>
<section>
<ul>
<li><a href="javascript:void(0)">+ All Vendors</a></li>
<li>
<article id="header-search">
<form action="#">
<input type="text" name="search" value="Exam Code">
</form>
</article>
</li>
<li>
<article id="header-cart">
<img src="img/cart-icon.png" > 000
</article>
</li>
<li><a href="javascript:void(0)">Sign In/Register</a></li>
</ul>
</section>
<nav>
<ul>
<li><a href="index.html"><img src="img/home.png" ></a></li>
<li><a href="javascript:void(0)">Bundle</a></li>
<li><a href="javascript:void(0)">Faqs</a></li>
<li><a href="javascript:void(0)">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
【讨论】：
HTML 我改了李序 标题 div width:auto;最大宽度：60%；边距：自动；溢出：隐藏； 标题部分 li display:block;向左飘浮;边距：37px 0px 28px 7px； 【参考方案3】：只需更改您的 css 类
nav ul li a
font-family: 'PT Sans', sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
color: #2a323a;
padding: 38px 20px 30px 20px; // This is where you are wrong
text-decoration: none;
height: 93px;
这是因为您在底部设置了太多的填充，不允许出现边框
会有用的
【讨论】：
蓝色边框现在出现但不同步。我已经更新了我的链接，请检查。以上是关于悬停背景显示不正确？的主要内容，如果未能解决你的问题，请参考以下文章