我有一个水平导航栏,当我将鼠标悬停在链接上时,我想突出显示链接所在的整个单元格,但是,我只能获取文本周围的直接区域以突出显示。我非常感谢有关如何实现这一目标的任何指示。
这是我的JS小提琴:http://jsfiddle.net/PYKXb/1/
这是我的CSS代码:
#horizontal-style {
display: table;
width: 100%;
margin:0px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}
#horizontal-style li {
display: table-cell;
vertical-align:middle;
height:auto;
padding:1%;
}
#horizontal-style a:link {
display: block;
border: none;
text-align: center;
margin:auto;
padding:none;
background:#ebebec;
color:#005da4;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:90%;
display:inline-block;
vertical-align:middle;
}
#horizontal-style a:visited {
display: block;
border: none;
text-align: center;
margin:auto ;
padding:none;
background: #ebebec;
color:#005da4;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:90%;
display:inline-block;
vertical-align:middle;
}
#horizontal-style a:hover {
display: block;
border: none;
text-align: center;
margin:auto ;
padding:none;
background: #acce39;
color:#005da4;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:90%;
display:inline-block;
vertical-align:middle;
}
#horizontal-style a:hover {
display: block;
border: none;
text-align: center;
margin:auto ;
padding:none;
background: #acce39;
color:#005da4;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:90%;
display:inline-block;
vertical-align:middle;
}
这是我的HTML代码:
<ul id="horizontal-style">
<li><a href=# >Home</a></li>
<li><a href=# >About Us</a></li>
<li><a href=# >Online<br />Courses</a></li>
<li><a href=# >Registration</a></li>
<li><a href=# >Faculty</a></li>
<li><a href=# >Calendar</a></li>
<li><a href=# >Store</a></li>
<li><a href=# >Testimonials</a></li>
<li><a href=# >Online<br/>Lectures</a></li>
<li><a href=# >Contact Us</a></li>
<li><a href=# >Forum</a></li>
</ul>
答案 0 :(得分:3)
这很好用,看看here
#horizontal-style li {
display: table-cell;
vertical-align:middle;
height:auto;
padding:1%;
background:#ebebec;
}
#horizontal-style li:hover{
background-color:#acce39;
}
答案 1 :(得分:2)
只需将填充从li
移至a
,然后将width
和height
等同于100%
#horizontal-style a:link {
padding: 1%;
width: 100%;
height: 100%;
...
...
}
它使整个单元格超链接。
答案 2 :(得分:1)
您在代码中使用了大量重复且不必要的CSS。尝试优化它。
其次,在我看来,实现这一目标的另一种方法是使用父“div”标签将菜单括起来。
“ul”标签内的所有“li”标签都可以向左浮动。 (这给出了横向菜单外观)
“li”标签内的所有链接标签“a”都可以在CSS中以“display:block”样式制作,具有您想要的宽度。
因此,现在当您使用CSS更改链接的“悬停”状态并更改“背景颜色”时,您的整个选定宽度将变为其颜色。
希望这有帮助!
CSS:
#menubar{
height:50px;
background:#000000;
margin-top:100px;
padding-top:15px;
padding-left:20px;
}
ul{
list-style-type:none;
padding:0px;
margin:0px;
}
#menubar ul li{
float:left;
}
#menubar ul li:hover a{
background:#fff;
}
#menubar ul li a{
text-decoration:none;
color:#FFF;
display:block;
width:150px;
text-align:center;
}
HTML:
<div id="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
<div style="clear:both;"></div>
</div>