Question

我有一个简单的按钮，我想使用CSS来进行转发，用链接打开几个按钮的下拉菜单，当按下按钮时，我希望按钮保持在转接状态。如何实现这一目标？例如，一个游戏按钮，当它悬停在它上面时会下降到具有不同游戏链接的按钮。对不起，如果不清楚的话。谢谢你提前。

Answer 1

我认为这可能比你期望的更多。为了使事情变得更容易，我建议使用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");
});

Answer 2

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

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

function over(ELEMENT){
            ELEMENT.mouseover(function(){
                //mouse over
            });
            ELEMENT.mouseleave(function(){
                //mouse not over
            });
        }

Answer 3

不幸的是，不是一个简单的CSS事情，但请查看Drop，我的轻量级脚本用于此类事情。它不是jQuery - 它是vanilla JavaScript。

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

在悬停按钮上

3 个答案: