2

我有一个水平导航栏，当我将鼠标悬停在链接上时，我想突出显示链接所在的整个单元格，但是，我只能突出显示文本周围的直接区域。我将不胜感激有关如何实现这一目标的任何指示。

这是我的 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>
4

3 回答 3

3

这工作正常，看看这里

#horizontal-style li {
    display: table-cell;
    vertical-align:middle;
    height:auto;
    padding:1%;
    background:#ebebec;
}
#horizontal-style li:hover{
    background-color:#acce39;
}
于 2013-08-23T16:08:53.280 回答
2

只需将填充从lito移动a并添加width和height等于100%

#horizontal-style a:link {
   padding: 1%;
   width: 100%;
   height: 100%;
   ...
   ...
}

它使整个单元格超链接。

见演示：http: //jsfiddle.net/aepKP/

于 2013-08-23T16:13:49.917 回答
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>
于 2013-08-23T16:55:31.330 回答