I have a couple of position: absolute; "buttons" display:block; <a>'s and a couple of position: absolute; div's with text in them. The div's are hidden by display:none; set to the default.

When you *hover*hover over a button, the div next to it (in the code) should appear (with some kind of fade/scroll effect) and then fade/scroll out again if you move the cursor away from the button.

When you click on a button, the div next to it should stay visible (i.e. display:block;). It should only disappear again if you click on the button or the div itself (hovering over the button or the div shouldn't change anything).

I thought this would be straightforward, but I can't get it to work.

I have a couple of position: absolute; "buttons" display:block; <a>'s and a couple of position: absolute; div's with text in them. The div's are hidden by display:none; set to the default.

When you *hover*hover over a button, the div next to it (in the code) should appear (with some kind of fade/scroll effect) and then fade/scroll out again if you move the cursor away from the button.

When you click on a button, the div next to it should stay visible (i.e. display:block;). It should only disappear again if you click on the button or the div itself (hovering over the button or the div shouldn't change anything).

I thought this would be straightforward, but I can't get it to work.

• javascript
• jquery
• html
• css

1 Answer 1

with a little knowledge of your html, here's how I got it.

html

<a href="#" class="mybutton">button</a>
<div class="mydiv">some text in it.</div>

jQuery

$('.mydiv').addClass('hover').click(function(){
     $(this).addClass('hover').fadeOut();
});

$('a.mybutton').click(function() {
    $('.mydiv').toggleClass('hover').show();
    // $('.mydiv').removeClass('hover').show();
}).hover(function() {
    $('.mydiv.hover').fadeIn();
}, function() {
    $('.mydiv.hover').fadeOut();
});

Crazy demo