导航菜单带有漂亮的 jquery 淡入淡出动画按钮鼠标悬停

Question

我构建导航菜单，其中每个按钮将有两个图像 - 一个使用 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。我无法正确设置按钮的样式，因此 Button1 位于 Button2 的左侧。目前所有两个按钮都显示在同一个空间中（一个在另一个），所以最后一个是唯一可见的。

这是我的 CSS：

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

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

    a
    {
        width:150px;
        float:left;
    }

我是否缺少任何 CSS 容器？ 我的意思是让每个按钮长 150 像素。 我想让按钮 1 长 150px，然后按钮 2 在同一行。

感谢您的帮助！

Answer 1

1. 您对所有跨度使用 position: absolute，这会将它们放置在 x 和 y 轴上的 0 0 处。为他们设置不同的left 位置。
2. 为您的跨度使用 display: block，因此它们具有高度和宽度。

试试这个：

    #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;
}

在这里查看：http://jsfiddle.net/SebastianPataneMasuelli/L5guL/1/

或者，您可以放弃 position: absolute，并操纵第二个跨度，给它一个相对位置并将其向左移动。这将使您可以浮动元素并避免绝对左侧定位，因为您有更多链接，这可能会变得笨拙。 例如：http://jsfiddle.net/SebastianPataneMasuelli/L5guL/4/