bookmark

jquery - hover on a button to get options in a modal box like goolge plus - Stack Overflow


Description

down vote accepted

Here is an example on how to do:

<!DOCTYPE HTML> <html> <head>

&lt;!-- jQuery --&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
var aa;
    $(document).ready(function() {

        $(&quot;.addContainer&quot;).mouseenter(function() {

            $(&quot;.addCircles&quot;).animate({height : 200});

        });

        $(&quot;.addContainer&quot;).mouseleave(function() {

            $(&quot;.addCircles&quot;).animate({height : 0});

        });

        $(&quot;.addCircles input[type=checkbox]&quot;).change(function(e){
            alert($(this).attr(&quot;id&quot;)+&quot;: &quot;+($(this).attr(&quot;checked&quot;) == &quot;checked&quot; ? &quot;checked&quot; : &quot;unchecked&quot;));
        });

    });
&lt;/script&gt;

</head> <body> <div class="addContainer" style="position: relative; width: 120px;"> <div class="add" style="cursor: pointer;">Add to Circles</div> <div class="addCircles" style="height: 0; position: absolute; overflow: hidden;"> <ul style="list-style: none;"> <li><input type="checkbox" id="circle1" />Circle 1</li> <li><input type="checkbox" id="circle2" />Circle 2</li> <li><input type="checkbox" id="circle3" />Circle 3</li> </ul> </div> </div> </body> </html>

Preview

Tags

Users

  • @folke

Comments and Reviews