0

我有一个这样的菜单：

<div id="header">
 <div id="nav">
  <ul>
   <li><a href="/home/"><img src="/images/icons/home.png" alt="Home" /></a></li>
  <li><a href="/tool/"><img src="/images/icons/tool.png" alt="Tool" /></a></li>
  <li><a href="/lists/"><img src="/images/icons/tags.png" alt="Lists" /></a></li>
 </ul>
</div>
</div>

我想要一个悬停/活动状态的矩形图像。问题是无论我的图像有多大，它们总是缩小。

我的图标是 30px x 30px。我的背景图片是 69 像素 x 34 像素（它们几乎是 30x30）。

这些是我的 CSS：

#header {
    color      : #cccccc;
    font-size  : 1.0em;
    padding    : 0;
    min-height : 37px;
    background : #2d2d2d;
    vertical-align: middle;
}

#nav {
    font-size      : 1.1em;
    display        : inline;
}

#nav ul {
    padding        : 0;
    margin-left    : 270px;
    margin-bottom  : auto;
    margin-top     : auto;
    float          : left;
    vertical-align : middle;
    list-style     : none;
    position       : relative;
    display        : inline-table;
    height         : 37px;
    line-height    : 37px;
}

#nav li {
    float           : left;
    list-style      : none;
    padding         : 0px 35px 3px 0px;
    display         : inline;
    vertical-align  : middle;
}

 #nav li img {
    top: 100%;
    vertical-align  : middle;
}


#nav a:hover {
    background: url('../images/icons/overtop.png') no-repeat;
    border: 0;
    background-size: 100%;
    background-size: 69px 34px;
    width:69px;
    height:34px;
}

#nav a.active {
    background: url('../images/icons/backtop.png') no-repeat;
    border: 0;
    background-size: 100%; 
    background-size: 69px 34px;
    width:69px;
    height:34px;
}
4

2 回答 2

2

乍一看，我确实注意到了一些事情：

您应该尝试使用 background-image:url('link/to/your/image.png')。

您也可以尝试省略 background-size: 100% 因为它是多余的。

只是为了澄清（由于我的声誉很低，我无法发表评论），您试图通过视觉线索（例如图标上方的黑条）向用户指示他们当前正在/即将点击的页面，对吗？

编辑

尝试在悬停时引用列表项而不是锚标记，例如：

li:hover {
    background: url('http://216.119.77.64/test/icons/overtop.png')  no-repeat;
    border: 0;
    background-size: 69px 34px;
}

它修复了大小问题，但图像不在背景中居中。

于 2012-11-21T00:18:53.690 回答
0

像这样试一试：

#nav a {
    border: 0;
    width:69px;
    height:34px;
}

#nav a:hover {
    background: url('../images/icons/overtop.png') no-repeat;
}

#nav a:active {
    background: url('../images/icons/backtop.png') no-repeat;
}
于 2012-11-21T00:19:36.050 回答