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容器吗？我的观点是让每个按钮长150px。我希望按钮1长150px，然后按钮2在同一行。

感谢您的帮助！

Answer 1

您正在使用position：absolute表示所有跨度，它们在x和y轴上将它们置于0 0。为他们设置不同的left位置。
使用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/

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

带有漂亮的jquery的导航菜单fadeIn按钮鼠标上的fadeOut动画

1 个答案: