CODEWITHSUNDEEP
jqueryhtmlcss
hepimen
hepimen

Reputation: 13

Hidden button shown on mouse over other div

I have a header with 5 image buttons 

<div id="header">
<a href="#" onClick="goto('#Omeni', this); return false"><div id="centeredOmeni"></div></a>
<a href="#" onClick="goto('#folio', this); return false"><div id="centeredFolio"></div></a>
<a href="#" onClick="goto('#folio2', this); return false"><div id="centeredFolio2"></div></a>
<a href="#" onClick="goto('#stor', this); return false"><div id="centeredStor"></div></a>
<a href="#" onClick="goto('#kont', this); return false"><div id="centeredKont"></div></a>
</div>

Where I would like button with id centeredFolio2 to be shown on centeredFolio:hover and available for click. All 5 buttons have a different background-image on hover in CSS and I would like to keep that. I am fine with a solution either CSS or jQuery, I could find a working solution which works on divs inside a href like these. The button either stayed undisplayed or it never got hidden.

Here is jsFiddle without the effect http://jsfiddle.net/nqmf7/

Thank you.

Upvotes: 1

Views: 404

Answers (1)

cssyphus
cssyphus

Reputation: 40038

Here is a solution that might work for you, using jQuery's mouseover() method:

jsFiddle here

First of all, you must add display:none; to the css for div #centeredFolio2:

display:none;

Next, you can use this jQuery:

$(document).ready(function() {

    $('#centeredFolio').mouseover(function() {
        $('#centeredFolio2').show();
    });
    $('[id^=centered]').not('#centeredFolio, #centeredFolio2').mouseover(function() {
        $('#centeredFolio2').hide();
    });
    $('#centeredFolio2').click(function() {
        $(this).hide();
        alert('You clicked the button');
    });

}); //END document.ready

Upvotes: 1

Related Questions