Question

嗨：多年来我在很多网站上看过这个（顶部的水平按钮栏，当悬停在其中一个主按钮上时会显示相关子功能的访问按钮），但我不太清楚怎么做。我发现这里的代码实际上让我在没有任何javascript的情况下在那里，但每当显示一个子按钮集时，它会向下推送所有后续页面内容。我不想要这个。我宁愿让按钮组打开（即覆盖）页面内容，而不会移动任何“背后”。

这是一个小提琴，展示了我到目前为止所拥有的......

    <html>
        <head>
        <style>
        body{position:fixed;}
        button{ width: 100%; }
        button.hidden { display:none;}
        button.main {display:block;}
        div.buttongroup {display:block; float: left; width: 20%;}
        div.buttongroup:hover .hidden {display:block;}
    </style>
    </head>
    <body>
        <div class="buttongroup" id="one">
        <button class="main">MAIN 1</button>
        <button class="hidden">2</button>
        <button class="hidden">3</button>
        <button class="hidden">4</button>
        <button class="hidden">5</button>
        </div>
        <div class="buttongroup" id="two">
        <button class="main">MAIN 2</button>
        <button class="hidden">2</button>
        <button class="hidden">3</button>
        <button class="hidden">4</button>
        <button class="hidden">5</button>
        </div>
        <div class="buttongroup" id="three">
        <button class="main">MAIN 3</button>
        <button class="hidden">2</button>
        <button class="hidden">3</button>
        <button class="hidden">4</button>
        <button class="hidden">5</button>
        </div>
        <div style="clear:both;"></div>
        <p>Howdy. I am a paragraph or any other page contents (images, background, etc.) that should just REMAIN fixed exactly where they are in the background when the site visitor momentarily hovers over the main button above and the hidden buttonset cascades open.</p>
    </body>
    </html>

http://jsfiddle.net/Lzd6zraq/

Answer 1

您需要将按钮设置为 position：absolute 。这是一个例子：http://jsfiddle.net/Lzd6zraq/1/ 你也可以将它们设置为 position：fixed ，即使你滚动它们也会一直保持在它们的位置。

.buttons {position: absolute; width: 100%;}

<div class="buttons">
  *buttons*
</div>

在悬停时显示垂直按钮组而不移动/按下背景内容

1 个答案: