我想像这样悬停:http://i.imgur.com/yi3Ehu2.png .
我做过这样的事情:http://jsfiddle.net/szsq2424/
如果我在 anchor 元素上使用 botom-border
而没有 display: block
的悬停,看起来就像我想要的那样。但是当我在白色标题类中的 a
元素上使用 display: block
(使所有按钮都可点击,而不仅仅是文本)时,它会将边框向下放到底部的按钮。一些想法 friend ??谢谢 !我是 html + css 的新手,感谢您的帮助!
最佳答案
用 span 将 anchor 内的文本包裹起来,并为其应用边框。
.white-header {
width: 1400px;
background-color: white;
margin: 0;
padding: 0;
}
.white-header ul {
margin: 0 0 0 100px;
padding: 0;
}
.white-header ul li {
list-style: none;
float: left;
line-height: 60px;
}
.white-header ul li a {
display: block;
text-align: center;
}
.white-header ul li a:link,
.white-header ul li a:visited {
color: #3f3f3f;
text-decoration: none;
}
.white-header ul li a:hover {
color: #57C5A0;
}
.white-header ul li a:hover span {
color: #57C5A0;
border-bottom: 2px solid #57C5A0;
}
/********
FIRST BUTTON
********/
.white-first {
width: 120px;
max-height: 60px;
text-align: center;
border-left: 1px solid #383838;
border-right: 1px solid #383838;
}
/********
SECOND BUTTON
*********/
.white-second {
width: 150px;
text-align: center;
border-right: 1px solid #383838;
margin: 0;
}
.white-second a:link,
.white-second a:visited {
color: black;
text-decoration: none;
}
.white-second a:hover {
color: #57C5A0;
padding-bottom: -10px;
}
/******
VISA LIETUVA BUTTON
*******/
.white-third {
width: 270px;
border-right: 1px solid #383838;
}
<header class="white-header">
<ul>
<li class="white-first"><a href="#"><span>Pramogos</span></a></li>
<li class="white-second"><a href="#"><span>Pramogos</span></a></li>
<li class="white-third"><a href="#"><span>Pramogos</span></a></li>
</ul>
</header>
关于html - 使用显示 : block with bottom-border on hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28320862/