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</ a ></ div >
< div id="id2" >< a href="#" >DIV1</ a ></ div >
< div id="id3" >< a href="#" >DIV1</ a ></ div >
< div id="rightDiv" >
< a id="id1match"> </ a>
< a id="id2match"> </ a>
< a id="id3match"> </ a>
</ div >

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>
< a id="id2match" class="region"> </ a>
< a id="id3match" class="region"> </ a>

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

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

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.

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/

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

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.

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

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

http://jsfiddle.net/daFDn/312/

First you make hover on link, the image appears on the right, then you hover on image without any pause, so the image does not dissapear but continues to display while you hover it.

I took out the img:hover {display:block}

@ichibon

Perhaps you could provide us with a Codepen of what you are after (obv. without the click)?

The answer is likely to be that Javascript will be required to perform certain actions on the click event.

(without reading everyting) @chriscoyier did a write up on something similar to this using :target

Check that out.

as you see if we hover on one two and three then on right side which comes over, those all are pics, can any one please tell me how to do that if i hover on left boxes then some data which have written , will show on right boxes respectively hovering on left boxes.

Sir Actually i want know that, if we are trying to show some written lines besides these pics, as when we hover on Item one it displays a pic on right side so if we want some lines not the pic what we will do

Well you could float the divs or position the viewarea with absolute position.

#list {float:left;width:50%}
#viewarea {float:left;width:50%;padding-top:80px}

jozsef!! actually i want to know that, http://jsfiddle.net/jnQ4d/ when i will hover on Services , then it must show a div which is Displayed None. but with hover will display : block please help me in this case

thanx a alot can you link som finest hovers for website, am making and web site and am tying to develop some new taste. and thinking about a cool design for other pages , index is here Future FAme

refer me some Design for my site please

  <ul class="nav">
<li class="number1"><a href="#"><img class="logo" src="images/logo300075.png" alt="" /></a></li>
<li class="number2"><a href="#">Read</a></li>
 ...
<li class="number6"><a href="#">Browse</a></li>
<li class="number7"><a href="#">Archives</a></li>
</ul>