填充空div与背景和展开父标签的尺寸

Question

我有一个导航，其中包含文本或图像的链接。我希望图像在悬停时更改，所以我在空白div内使用CSS背景。但是，我正在寻找一种不使用“position：absolute”的方法。因为包含标签不会扩大以填充其尺寸。我还想在不使用透明占位符图像的情况下执行此操作，因为我想找到更优雅的解决方案。

这里的的jsfiddle和代码：

http://jsfiddle.net/urhLs736/1/

<nav id="navigation"> 

    <ul> 
     <li><a onclick="example1.html">PAGE 1</a></li> 
     <li><a onclick="example2.html">PAGE 2</a></li> 
     <li><a href="example3.html"><div id="nav-image"></div></a></li> 

    </ul> 

</nav> 

并为CSS：

#navigation { 
     z-index: 1; 
     background-color: #3A5E90; 
     color: #FFFFFF; 
     text-align: center; 
     width: 100%; 
     padding-top: 5px; 
     padding-bottom: 5px; 
    } 

    #navigation.fixed { 
     position: fixed; 
     top: 0px; 
    } 

    #navigation li { 
     display: inline; 
    } 

    #navigation a { 
     cursor: pointer; 
     padding-left: 3.5%; 
     padding-right: 3.5%; 
     color: #FFFFFF; 
     text-decoration: none; 
    } 

    #navigation a:hover { 
     background: #FFFFFF; 
     color: #3A5E90; 
     padding-top: 2%; 
     padding-bottom: 2%; 
    } 

    #nav-image { 
     display: inline; 
     background: url('https://avatars1.githubusercontent.com/u/3081095?v=2&s=72') no-repeat; 
     background-size: 100%; 
     margin-bottom: -6px; 
     height: 24px; 
     width: 100px; 
    } 

    #nav-image:hover { 
     height: 24px; 
     width: 100px; 
     background: url('https://avatars3.githubusercontent.com/u/5278945?v=2&s=96') no-repeat; 
     background-size: 100%; 
    } 

Answer 1

我认为，你的布局将作为是一个小的调整时CSS：

#nav-image { 
    display: inline-block; 
    background: url('https://avatars1.githubusercontent.com/u/3081095?v=2&s=72') no-repeat; 
    background-size: 100%; 
    margin-bottom: -6px; 
    height: 24px; 
    width: 100px; 
    border: 1px dotted yellow; 
} 

如果使用display: inline-block，该div会占用指定的宽度和高度，背景图像将是可见的，正如你所期望的悬停效果会工作。

观看演示：http://jsfiddle.net/audetwebdesign/9fd1dxn4/

Answer 2

为了实现这一点，你必须改变双方的HTML和你CSS。

首先，你的HTML应该是这样的：

<nav id="navigation"> 
    <ul> 
     <li><a onclick="example1.html">PAGE 1</a> 
     </li> 
     <li><a onclick="example2.html">PAGE 2</a> 
     </li> 
     <li id="nav-image"><a href="example3.html">PAGE 3</a> 
     </li> 
    </ul> 
</nav> 

请注意，我已经加入你的空div一些内容。如果你有一个空的<li>，你将没有背景（就像你的例子），因为你有一个0x0像素li元素。我增加了一些内容，因此li显示器作为一般规则，反正你看的CSS，这是下面后不会是必要的：

#navigation { 
     z-index: 1; 
     background-color: #3A5E90; 
     color: #FFFFFF; 
     text-align: center; 
     width: 100%; 
     padding-top: 5px; 
     padding-bottom: 5px; 
    } 
    #navigation.fixed { 
     position: fixed; 
     top: 0px; 
    } 
    #navigation li { 
     display: inline-block; 
     height: 24px; 
     width: 100px; 
     padding-left: 3.5%; 
     padding-right: 3.5%; 
    } 
    #navigation ul li a { 
     cursor: pointer; 
     padding:2% 3.5%; 
     color: #FFFFFF; 
     text-decoration: none; 
     display:block; 
     height: 24px; 
     width: 100px; 
    } 
    #navigation a:hover { 
     background: #FFFFFF; 
     color: #3A5E90; 
    } 
    #nav-image { 
     background: url('https://avatars1.githubusercontent.com/u/3081095?v=2&s=72') no-repeat; 
     background-size: 100%; 
    } 
    #nav-image:hover { 
     background: url('https://avatars3.githubusercontent.com/u/5278945?v=2&s=96') no-repeat; 
     background-size: 100%; 
    } 
    #nav-image:hover a { 
     background:transparent 
    } 

OK，现在你看，我已经做了一些修改和在li上添加宽度和高度（与您样本中的相同，但可以将其更改为任何您想要的）。现在，如果您删除空DIV中的内容，您将看到渲染如何更改。虽然它很容易解决，但我会留给你，让你可以练习和理解整个定位和显示的工作原理。此外，您还可以添加补白，边距等

这里有一个fiddle所以你可以看到它在行动和玩