On Hover Button

Question

I have a simple button, and I want to use CSS to make it onhover, bring up a dropdown of a few more buttons with links, and when the button is pressed I want the button to stay at the onhover state. How can this be accomplished? For example a games button that when hovered over it drops down to buttons that have different links to games. Sorry if this is unclear. Thanks in advanced.

Answer 1

Unfortunately not a plain CSS thing to do, but check out Drop, my lightweight script for this sort of thing. It's NOT jQuery - it's vanilla JavaScript.

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

Answer 2

I think this may take more effort than you're expecting. To make things much easier, I recommend using Twitter-Bootstrap, which is a set of CSS/JS files that come packaged with usable components. The Dropdown component is probably what you're looking for. It is built in with part of the functionality you desire, the other part can be done with jQuery.

Here is the 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>

Here is the jQuery needed to make the hover effect:

$('#hoverbutton').mouseover(function() {
$('#hoverbutton').addClass("open");
});

Answer 3

look into mouseover and mouseleave inside jquery. you could come up with a simple function to detect if the mouse is over the element or not.

Since i have some source code open already here is some..

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