0

我有一个简单的按钮，我想使用 CSS 让它悬停，显示更多带有链接的按钮的下拉列表，当按下按钮时，我希望按钮保持悬停状态。如何实现？例如一个游戏按钮，当它悬停在它上面时会下拉到具有不同游戏链接的按钮。对不起，如果这不清楚。提前致谢。

4

3 回答 3

0

我认为这可能需要比您预期的更多的努力。为了让事情变得更容易，我建议使用Twitter-Bootstrap，这是一组与可用组件打包在一起的 CSS/JS 文件。Dropdown组件可能是您正在寻找的。它内置了您想要的部分功能，另一部分可以使用 jQuery 完成。

这是HTML：

<div id="hoverbutton" class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>

这是制作悬停效果所需的 jQuery：

$('#hoverbutton').mouseover(function() {
$('#hoverbutton').addClass("open");
});
于 2013-08-23T01:42:45.420 回答
0

查看 jquery 中的 mouseover 和 mouseleave 。你可以想出一个简单的函数来检测鼠标是否在元素上。

因为我已经打开了一些源代码，所以这里有一些..

function over(ELEMENT){
            ELEMENT.mouseover(function(){
                //mouse over
            });
            ELEMENT.mouseleave(function(){
                //mouse not over
            });
        }
于 2013-08-23T01:44:00.613 回答
0

不幸的是，这不是一件简单的 CSS 事情，但请查看 Drop，我的轻量级脚本用于此类事情。它不是 jQuery——它是原生的 JavaScript。

http://cferdinandi.github.io/drop/

于 2013-08-23T01:52:58.287 回答