Question

I have a few nested divs with different articles in them.

<div id="maindiv" onmouseover="showbuttons()" onmouseout="hidebuttons()">
    <div style="float: left"></div>
    <div style="float: right">
         <div id="buttons"></div>
    </div>
</div>

function show() {
    $('#buttons').slideDown('fast')
    //$('#buttons').stop().slideDown('fast')

}

function hide() {
    $('#buttons').slideUp('fast')
    //$('#buttons').stop().slideUp('fast')

}

The problem is I think the hover event gets fired a couple of times so I keep having the buttons disappear and reappear. So I added stop() – Which is commented in the code above. But then I have buttons half way through the page (due to the cancelled animation) when I have the mouse leave.

Or perhaps theres a way to do this in CSS?

Answer 1

Remove the onmouseover and onmouseout attributes from the div and replace your javascript with:

$('#maindiv').hover(
    function() {
        $('#buttons').stop().slideDown('fast');
    },
    function() {
        $('#buttons').stop().slideUp('fast');
    }
);