滑动门 CSS 菜单问题...

Question

所以我正在尝试做一个滑动门 CSS 菜单——基本上是一张图像，当它悬停或处于活动状态时，您可以在其上移动背景位置。

但是，通常当我使用以下方法移动到下一个链接时：

#xmenu li.ypart {width:80px; height:35px;}
#xmenu li.ypart a {background-position:-33px 0px; }

它从最后一个链接到我指定的任何宽度。看到下图中的地图图标了吗？我正在尝试链接它，以便该链接不会一直从“发送反馈”链接到地图按钮。我只是希望链接是那个正方形。

有什么想法吗？

Answer 1

如果我理解正确，您应该将链接（ 元素）设置为块元素，并为其指定特定的宽度和高度（可能还包括相对/绝对定位，具体取决于您的布局方式）设置）。这样，链接的点击区域将被限制在这些尺寸内。

标记是这样的：

...
<a href="/map">Map</a>
...

CSS 也是这样：

#xmenu li.ypart a { display: block; width: 40px; height: 35px; }