导航菜单，带有漂亮的jquery fadeIn淡出动画，鼠标按在上面

我创建了一个导航菜单，其中每个按钮都有两个图像——一个使用jquery mouseenter和mouseleave事件转换成另一个。Jquery部分已经整理好，不是问题。在每个锚中，我有两个跨度，只有一个可见

我决定继续使用的HTML如下所示：

<div>
    <a href="#">
        <span id="span1">Button1</span>
        <span id="span2">Button1</span>
    </a>
    <a href="#">            
        <span id="span3">Button2</span>
        <span id="span4">Button2</span>   
    </a>
</div>

我是否缺少任何css容器？ 我的观点是使每个按钮的长度为150px。 我希望按钮1的长度为150px，然后按钮2在同一行中

谢谢你的帮助

您正在对所有跨距使用position:absolute，这会将它们放置在x轴和y轴上的0处。为它们设置不同的

左
位置

使用“显示：块”作为跨度，以便它们具有高度和宽度

尝试使用以下方法：

    #span1 { background-image:url('button1.png'); }
#span2 { background-image:url('button1H.png');  }
#span3 { background-image:url('button2.png'); left: 300px;}
#span4 { background-image:url('button2H.png'); left: 300px;}

span{ 
    background-repeat:no-repeat;  
    position:absolute;
    width:100px;
    height:50px;
    position: 0 0;
    display: block; 
    text-indent:-9000px;
}

请看这里：

或者，可以放弃“位置：绝对”，并操纵第二个跨距，为其指定相对位置并将其向左移动。这将允许您浮动元素并避免绝对左定位，因为当您有更多链接时，这可能会变得不明智。

---

示例：

很有趣。是否可以使每个锚都具有一定的宽度？我宁愿设置每个锚点的宽度，也不愿在每个跨度上设置缩进（左：300px）。这是因为我希望能够在服务器端隐藏某些锚。谢谢。虽然它使用了第n个子选择器，但不受IES支持。使用~selector（除IE6外，其他所有工具都支持）：嗯，它更好，但仍然不在那里，我添加了一些javascript，让它做我想做的事情（鼠标上的按钮在上面移动。这里没有图像，只有文本，在我的应用程序中，我将使用背景图像作为跨度。）但是按钮会移动。你能告诉我我做错了什么吗？

    #span1 { background-image:url('button1.png'); }
#span2 { background-image:url('button1H.png');  }
#span3 { background-image:url('button2.png'); left: 300px;}
#span4 { background-image:url('button2H.png'); left: 300px;}

span{ 
    background-repeat:no-repeat;  
    position:absolute;
    width:100px;
    height:50px;
    position: 0 0;
    display: block; 
    text-indent:-9000px;
}