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

admin管理员组

文章数量:1277887

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 pletely 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

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 pletely 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

• javascript
• jquery
• css
• hover
• jquery-hover

Share Improve this question Follow asked Feb 7, 2013 at 10:54 Jochen SchmidtJochen Schmidt 10944 silver badges1616 bronze badges 2

• 1 Did you try to use jQuery's hover function ? – Denys Séguret Commented Feb 7, 2013 at 10:55
• sorry, i forgot to mention that i'm not very familiar with JQuery... do you know how to do it? – Jochen Schmidt Commented Feb 7, 2013 at 10:57

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 8

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;
}

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())

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).

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();
}
);

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/GFMQR/

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

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

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./KP17XUgq

本文标签： javascriptMaking an element visible by hovering another element (without hoverproperty)Stack Overflow