Making an element visible by hovering another element (without :hover-property)

Question

Okay, here's the problem:

i have these three DIVs:

<div id="gestaltung_cd"></div>
<div id="gestaltung_illu"></div>
<div id="gestaltung_klassisch"></div>

…and these three DIVs – which are invisible (display:none;)– on a completely different position on the page:

<div id="mainhexa1"></div>
<div id="mainhexa2"></div>
<div id="mainhexa3"></div>

what i want to do is: if i hover "gestaltung_cd" i want to make "mainhexa1" visible and if i hover "gestaltung_illu" i want to make "mainhexa2" visbile and so on…

as you can see, the three invisible DIVs are no child-elements of the first three ones... so ":hover" is not possible in this case. Is there an easy way to do this in JQuery?

thanks, Jochen

Answer 1

You could use the sibling selector. As long as div's share the same parent, you can still affect them with hover

DEMO

Vital Code:

#gestaltung_cd:hover ~ #mainhexa1,
#gestaltung_illu:hover ~ #mainhexa2,
#gestaltung_klassisch:hover ~ #mainhexa3 {
    display: block;
}

Answer 2

using jQuerys hover function, like this:

$('#gestaltung_cd').hover(function() {
    $('#mainhexa1').toggle();
});

(if you don't want to hide the div on blur, then change toggle() to show())

Answer 3

Using jQuery's hover function :

var divs = {
   cd:        'mainhexa1',
   illu:      'mainhexa2',
   klassisch: 'mainhexa3'
};
$('[id^=gestaltung]').hover(function(){ // selects all elements whose id starts with gestaltung
   $('#'+divs[this.id.slice('gestaltung_'.length)]).toggle();
});

Note that it might be easier to have some relation between the opener and opening elements, like a class or another attribute (as in nnnnnn's answer).

Answer 4

Here's an example of how to do the first one and you'd just do the same for the other two with the relevant IDs.

$("#gestaltung_cd").hover(
function () {
    $("#mainhexa1").show();
},
function () {
    $("#mainhexa1").hide();
}
);

Answer 5

I'd suggest you add an attribute to the first three divs that specifies which div to show on hover:

<div id="gestaltung_cd" data-maindiv="mainhexa1"></div>
<div id="gestaltung_illu" data-maindiv="mainhexa2"></div>
<div id="gestaltung_klassisch" data-maindiv="mainhexa3"></div>

That way you can handle the show/hide on hover with a single use of the .hover() method:

$("div[data-maindiv]").hover(function() {
    $("#" + $(this).attr("data-maindiv") ).show();
},
function() {
    $("#" + $(this).attr("data-maindiv") ).hide();
});

Demo: http://jsfiddle.net/GFMQR/

Answer 6

$("#gestaltung_cd").hover(function({
    $("#mainhexa1").css({ "visibility": "visible" });
}, function() {
    //Your hover out function
});

Answer 7

If you wrap each block of divs in a container you can match them up by index, which will make the code work regardless of how many divs there are. Something like this:

<div class="gesaltung-container">
    <div id="gestaltung_cd">gestaltung_cd</div>
    <div id="gestaltung_illu">gestaltung_illu</div>
    <div id="gestaltung_klassisch">gestaltung_klassisch</div>
</div>
<div class="mainhexa-container">
    <div id="mainhexa1">mainhexa1</div>
    <div id="mainhexa2">mainhexa2</div>
    <div id="mainhexa3">mainhexa3</div>
</div>

$('.gesaltung-container div').hover(
    function () {
        $('.mainhexa-container div').eq($(this).index()).show();
    },
    function () {
        $('.mainhexa-container div').eq($(this).index()).hide();
    }
);

Example fiddle

Answer 8

Just for the record ...

You can do the effect you want only with CSS and HTML ( without javascript ), but you have to place your elements to follow each other and use + selector in CSS. Something like :

HTML

<div id="gestaltung_cd"></div>
<div id="mainhexa1"></div>
<div id="gestaltung_illu"></div>
<div id="mainhexa2"></div>
<div id="gestaltung_klassisch"></div>
<div id="mainhexa3"></div>

CSS

div#gestaltung_cd:hover + div#mainhexa1 {
   display:block;
}
div#gestaltung_illu:hover + div#mainhexa2 {
   display:block;
}
div#gestaltung_klassisch:hover + div#mainhexa3 {
   display:block;
}

you can check out the demo http://tinkerbin.com/KP17XUgq