[英]Having trouble with CSS hover with image background
我在列表中的TEXT站点的导航部分遇到了一些麻烦,例如:
<div class="nav_wrapper">
<ul class="nav">
<li><a href="index.php">HOME</a></li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="services.php">SERVICES</a></li>
<li class="last"><a href="contact_us.php">CONTACT US</a></li>
</ul>
</div>
现在,我想做的是将鼠标悬停在其上以显示图像背景; 但是,执行此操作时,图像无法完全显示...仅围绕文本本身; 当我将背景应用于标记时,这很有意义。
我尝试通过css将宽度和高度设置为标签,但不起作用。
所以我的问题是当他们悬停时如何显示整个图像?
我当前的CSS如下:
#header .nav_wrapper {
float: left;
width: 597px;
margin: 30px 0 0 50px;
}
#header .nav_wrapper .nav {
list-style-type: none;
list-style-image: none;
}
#header .nav_wrapper li {
display: inline;
width: 72px;
height: 23px;
font-family: "Zurich Cn BT", Tahoma;
font-size: 12px;
margin-right: 15px;
}
ul.nav li a, ul.nav li a:visited, ul.nav li a:focus {
color: #764422;
text-decoration: none;
}
ul.nav li a:hover, ul.nav li a:active {
color: #fff;
text-decoration: none;
background-image: url(../images/nav-bg.png);
}
#header .nav .last {
width: 87px;
margin-right: 0;
}
添加此CSS
ul.nav li a {
display:block;
}
<a>
链接需要display: block;
为了能够采取高度和宽度
要使块级链接仍然并排显示,您应浮动li
项或使其display: inline-block;
例如,使用li
的float和一些可视化的颜色
#header .nav_wrapper ul {
font-family: "Zurich Cn BT", Tahoma;
font-size: 12px;
list-style: none;
margin: 0;
padding: 0;
}
#header .nav_wrapper li {
float: left;
width: 72px;
height: 30px;
margin-right: 15px;
background: #eee;
text-align: center;
}
#header .nav_wrapper li a {
display: block;
line-height: 30px;
}
ul.nav li a, ul.nav li a:visited, ul.nav li a:focus {
color: #764422;
text-decoration: none;
}
ul.nav li a:hover, ul.nav li a:active {
color: #fff;
background: #444 url(../images/nav-bg.png);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.