Question

所以我有一个简单的问题。我有一个悬停背景图像更改效果，但是在悬停时似乎有一些额外的填充，我无法摆脱。

我的jsfiddle： http://jsfiddle.net/leongaban/G9dFa/

我已经尝试在悬停时调整背景图像的填充，但是添加所需的20个像素也会增加额外的间距。转到0不允许背景图像填充空间：（

enter image description here

任何提示赞赏！：）

HTML：

<div class="nav">
    <div id="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">LINK 3</a></li>
            <li><a href="#">LINK 4</a></li>
            <li><a href="#">OUR BLOG</a></li>
        </ul>
    </div>

    <div id="search">

    </div>
</div>

CSS：

.nav {
  width: 994px;
  height: 27px;
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav.gif');
}

#nav ul li {
  height: 27px;
  margin: 0;
  padding: 8px 20px 6px 20px;
  line-height:30px;
  text-align: center;
  font-size: 11px;
  border-right: 1px solid #fff;
  display: inline;
}

#nav ul li a {
  padding: 8px 0px 6px 0px;
  color: white;
  text-decoration: none;
}

#nav ul li a:hover {
  width: 100%;
  height: 100%;
  padding: 8px 20px 6px 20px;
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif');
}

Answer 1

你走了。换了一些CSS。当它应该在锚上时，你在li上有填充物。将你的li改为float而不是display：inline; 将背景图像制作背景并添加x轴重复。

http://jsfiddle.net/G9dFa/6/

    .nav {
  width: 994px;
  height: 27px;
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav.gif');
}

#nav ul li {
  height: 27px;
  margin: 0;
  line-height:30px;
  text-align: center;
  font-size: 11px;
  border-right: 1px solid #fff;
  float:left;
}

#nav ul li a {
  padding: 8px 20px 6px 20px;
  color: white;
  text-decoration: none;
}

#nav ul li a:hover {
  width: 100%;
  height: 100%;
  /*-webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;*/
  background:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif') repeat-x;
}

Answer 2

你走了。

http://jsfiddle.net/r9dTG/

编辑：

哇我们都得出了类似的结果，我唯一要强调的是，在LI标签填充顶部和锚标记上的填充底部声明的行高没有多大意义。我会使用其中一个而不是两个，因为无论如何数学都没有加起来，更少计算和维护。

Answer 3

将所有样式放在A - 标记上。除LI以外的display:inline除去所有内容。将display:block添加到您的A - 代码。

Answer 4

问题是你的锚点没有占用整个空间，因为你为LI元素设置了一个填充：

从LI
将填充添加到锚标记

#nav ul li a {
    width: 100%;
    height: 100%;
    padding: 8px 20px 6px 20px;
    color: white;
    text-decoration: none;
}

#nav ul li a:hover {
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif');
}

<强> DEMO

Answer 5

与Diodeus类似：

将所有样式放入锚标记a。

将您的锚标记样式更改为display: inline-block。

在某些浏览器中显示内联块元素有一个有趣的错误，如果项目之间有任何空白区域，它将呈现一个时髦的空间。要解决此问题，您需要修复HTML以将li项目端到端。即实际上移除它们之间的空间。

以下是您的代码示例：

http://jsfiddle.net/leongaban/G9dFa/

Answer 6

您不需要<li>上的填充，请尝试删除它，它应该可以正常工作

填充在背景图像上悬停创建额外的不需要的空间

6 个答案: