Geek Answers Handbook

How to make hover over one div to cause changes in another div?

I want to create the following effect for my next website:

  • I have 3 DIVs with some text content in the left column.
  • I have an image in a div in the right column.
  • The image in the right div has 3 different independent parts of the image, each individual part should be highlighted when I hover over one of the divs (associated with this part of the image) in the left column. The div I am hanging on should also be highlighted on hover.
  • I also need the same effect only this time when I hover over any of these parts of the image in the DIV in the right column. I want it to highlight the associated div, and also highlight part of the image.

I know that all this may seem really confusing, so I took a photo, hoping to explain a visually visual design. (check the attached image).

Now I'm not sure if this can be achieved solely using only CSS or using a combination of CSS and jQuery or smn.

If anyone has ever come across such an implementation, or knows where I can find sample code, or can direct me in the right direction, I would really appreciate it!

+7
source share
2 answers

You can configure the snap bindings on the image of your continent and the corresponding div on the left:

$('.div1').mouseover(hoverOne); $('.continent1').mouseover(hoverOne); var hoverOne = function(){ //hightlight elements } //lather...rinse...repeat for the rest
+3
source

Something like this should work. See http://jsfiddle.net/neo108/fCsNN/ .

Just specify your div for related parts on the map in the mouseout and mouseover functions.

+3
source

More articles:


All Articles