无法指定悬停时显示的彩色 div 的宽度答案

【问题标题】：Having trouble specifying the width of a colored div to display on hover无法指定悬停时显示的彩色 div 的宽度
【发布时间】：2014-01-15 11:04:58
【问题描述】：

我正在制作一个导航栏。当鼠标悬停在导航栏上的文本上时，它后面的区域会改变颜色，但我似乎无法指定这种颜色变化的宽度（它只显示为包含文本的列表元素的宽度）。这是我的html：

<div class="portland"></div>
<div class="title">PDX</div>
<div class="navbar">
    <ul class="table">
        <span class="color"><li class="item"><a class="navlink" href="#">Home</a></li></span>
        <span class="color"><li class="item"><a class="navlink" href="#">Groups</a></li></span>
        <span class="color"><li class="item"><a class="navlink" href="#">Events</a></li></span>
    </ul>
</div>

还有我的 CSS：

html, body {
  width: 100%;
  margin: 0;
  padding: 0; }

.navbar {
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: red;
  font-family: Helvetica;
  font-size: 160%;
  padding-top: 9px;
  padding-bottom: 5px; }

.color:hover {
  display: inline;
  background-color: orange;
  width: 50%;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px; }

.table {
  list-style: none;
  display: table;
  padding: 0px;
  margin: 0px auto; }

.item {
  display: inline;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: none; }

.navlink {
  text-decoration: none;
  color: black;
  background-color: green; }

每当我悬停时，橙色会伸出 30 像素（.item 的长度，'li' 元素）。我尝试了负填充值无济于事，我可以使橙色显示（.color）超过具有更高填充值的 .item，但我不能将其减小到 30px 以下。我试图显示宽度小于 .items 的颜色，而不影响 .items 在我的导航栏中的定位。怎么回事？

总结：如何指定 div 的尺寸以在悬停时显示颜色？

感谢阅读。

编辑：感谢大家的回答。问题是跨度必须在列表元素中。这是我的固定代码：

<ul class="table">
    <li class="item"><span class="color"><a class="navlink" href="#">Home</a></span></li>
    <li class="item"><span class="color"><a class="navlink" href="#">Groups</a></span></li>
    <li class="item"><span class="color"><a class="navlink" href="#">Events</a></span></li>
</ul>

以及相关的 CSS：

  .color:hover {
  display: inline;
  background-color: orange;
  width: 100%;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px; }

原来我并不像我想象的那样 SPAN-TASTIC！哈哈！对吧，伙计们？ ...伙计们...？

【问题讨论】：

首先：<li class="item"><span class="color"> 而不是<span class="color"><li class="item">。 ul 应该只包含 lis。
为什么要使用？在我看来，您可以删除跨度并执行以下操作： .item:hover{ background-color: #whatever; }
类似这样的东西：jsfiddle.net/abhitalks/8MJbY
谢谢大家，我把跨度放在 li 里面，现在一切正常。

标签： html css navigation position

【解决方案1】：

LIVE DEMO

UL 表示无序列表，而不是无序跨度

UL 不应该关心SPAN 元素，而是LI
因此：

<ul class="table">
   <li class="item"><span class="color"><a class="navlink" href="#">Home</a></span>
   <!-- more LI here -->
</ul>

CSS：

html, body {
  width: 100%;
  margin: 0;
  padding: 0; }

.navbar {
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: red;
  font-family: Helvetica;
  font-size: 160%;
  padding-top: 9px;
  padding-bottom: 5px; }
.color{
  width: 50%;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
  background:green;
}
.color:hover {
  background-color: orange;
}

.table {
  list-style: none;
  display: table;
  padding: 0px;
  margin: 0px auto; }

.item {
  display: inline;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 30px;
  padding-right: 30px;
}
.navlink {
  text-decoration: none;
  color: black;
}

【讨论】：