[Solved] How to make hovering over one div to trigger changes in another div?

[comparebest]

Hi everyone!

I am looking to create the next effect for my next website:

1) I have 3 DIVs with some text content in the left column.

2) I have an image in a div in the right column.

3) Image in the right div have 3 different independent image parts, each separate part has to be highlighted when I hover over one of the divs (related to that particular image part) in the column on the left. The DIV I am hovering over has to be highlighted as well on hover.

4) I also want the same effect only this time when I hover over any of those image parts in DIV on in the right column. I want it to highlight the related div, as well as highlight image part itself.

I know it all might sound really confusing, so I made a picture hopefully explaining my project visually. (check the attached image).

Now I am not sure if this can be solely achieved with use of only CSS, or by combination of CSS and jQuery or smn.

If anyone ever encountered similar implementation, or knows where I can find a code example, or could direct me in the right direction, I would really appreciate it!!!

[joshuanhibbert]

Here is a CSS version for you: http://jsfiddle.net/joshnh/daFDn/

You could set the default image as the background of the unordered list, and then place each corresponding image in the image tags provided.

Point 4 cannot be done with CSS, and I’m not sure of the best way to do it.

[Jozsef K.]

Actually it’s simple in 1 direction, hovering div highlights rightside.But hovering one of the righdiv’s element to highlight a previous element is a big challenge, maybe mission impossible but I will look for solutions.

Left column:

< div id="id1" < a href="#">DIV1
< div id="id2" >< a href="#" >DIV1
< div id="id3" >< a href="#" >DIV1
< div id="rightDiv" >
< a id="id1match"> 
< a id="id2match"> 
< a id="id3match"> 

CSS:

#rightDiv a { background:url(region.png) no-repeat 0 0;position:absolute;left:0;top:0 }
#rightDiv a#id1match { left:number;top:number }
…
#id1:hover { background:green }
#id1:hover ~ #rightDiv a#id1match { background-position:0 -100px }
#id2:hover ~ #rightDiv a#id2match { background-position:0 -500px }

Of course this solution is not perfect because the regions have to be non rectangular, so you have to use image map.But I will look into this problem in these days and will get back to you but you should know, with javascript you can solve it easily.

Update:

Viceversa you could simulate a trigger effect on left side like this:

< div id="rightside">
< a id="id1match" class="region"> 
< a id="id2match" class="region"> 
< a id="id3match" class="region"> 

< div id="fakeDiv1" class="fake" >DIV1
< div id="fakeDiv2" class="fake">DIV2
< div id="fakeDiv3" class="fake">DIV3

CSS:
…
.fake { position:absolute;top:0}
#id1match:hover ~ fakeDiv1 {left:-80x;top:0} // relative to #rightside div
#id2match:hover ~ fakeDiv2 {left:-80x;top:200px} // 200px height of a div from left
#id2match:hover ~ fakeDiv2 {left:-80x;top:400px}

If you don’t want to use extra markup, you could just use :

#id1match:hover:before {content:’DIV1′;position:absolute…. }
…

[michelm]

Hi Have done something similar:

http://www.rcicruiseholidays.com/destinations.php

use firebug to look at the css,
good luck,
Michel

[comparebest]

Wow thx for all of the replies, guys. I am going to spend today trying to implement any of these solutions.

So far my thoughts are:

@ joshuanhibbert : I like you version, and I might just settle for 1-3 steps solution for now. I tried adding image urls and it works like a charm. However I have one question : how do I set the image for neutral (passive) state, when there is no mouseover presented. So far, when I take mouse away from divs on left, there is empty part on right, I want there to be a default image.

@ jozsef : Thanks for all the code, including the updated version, however when I put it in http://jsfiddle.net , it doesn’t work as intended. If you could test it in there and be kind to drop a link to your solution, I would be very grateful!

@ michelm : I like the site you’ve built a lot! The map from link looks impressive, however I couldn’t find any independent divs that would trigger those parts of map on mouseover . So far the only way to highlight the part of map is to point mouse at it directly, I need to have divs with some text which, when mousedover, will trigger highlights on main image.

[comparebest]

After rereading joshuanhibbert’s answer I found he already mentioned the solution, my bad:) I’ve updated it already http://jsfiddle.net/daFDn/4/ . Thank you man, you are the best!

[Jozsef K.]

Sorry for the missunderstanding.My code was not functional, it was ment for illustration purposes only.I’ve made a functional demo for you, with colors only,hope it’s understandable.The yellow should be the colorless map, the grey should be invisible link positioned on every region, when hovering on link, it get’s a background with the color filled region.As I said before, it’s not perfect because the regions overlap other regions, because the links are rectangle forms, not shapes.So for perfecton you need an image map solution but for know here it is my demo:

http://jsfiddle.net/gU4sw/7/

[comparebest]

wow Joseph, this is exactly what I was looking for!!!! Thank you so much, Ill try to adjust it for my needs now!

I really love this forum, and how helpful people here.

[comparebest]

I still cant believe you’ve done it with just using CSS, its mind-blowing!

[comparebest]

One more question, when i try to add my final code (http://jsfiddle.net/gU4sw/13/) to wordpress page, it breaks :(

Am I doing something wrong? :)

[Jozsef K.]

You have to be more specific then that.Where is your implementation of this code in wordpress?

1. Anyway, might be that wordpress puts some extra tags in your structure and the general siblings selector(~) works only with sibling tags, you can’t traverse up one level to the parent to look for it’s sibling tags.So the html part has to remain the same way as in your final code in jsfiddle.The left side div-s can’t have a wrapper.

2. Maybe you allready have one of those id-s or classes defined in wordpress css.

[Jozsef K.]

One more thing, in case your left side text color doesn’t change on hover only the background, then it’s not necesarry to add all the same text in the fake divs.You can leave the fake div’s empty, perhaps a nbps to be valid, and give the left side tags a z-index bigger then your fake div, and for the left side containers(#id1,#id2…) a z-index lower then your fakediv.This way the text doesn’t repeat on every item.

Ex.
.fake {z-index:60}
.item { z-index:50;position:relative }
.item * {z-index:70;position:relative}

One more thing.It’s not ok to wrap block elements with a link.Or you put the link on every tag, or the better you position the link on your content:

.item a {background:url(transpareng.gif) repeat; position:absolute;left:0;top:0;width:100px;height:100px}

The transparent.gif is 1px in dimensions and it’s transparent.It’s used only for flicker bugs in ie on hover.

[osklar0328]

Great solution! Does anyone know how you can apply a fading effect on this. So that the pictures fade smoothly in and out when hovering over the links. I can just get the tags to fade but I want the images to fade in and out. Sorry for the bad english!

/Oskar from Sweden

[Mottie]

Another option is to use a plugin built specifically for this… check out mapper.js or maphilight for jQuery.

[Jozsef K.]

#rightDiv a {
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
}

#rightDiv a:hover {
opacity: 1;
}

[Author]

Posts