"Join" Hover states of separate DIV's

[Beefalo]

Say I have text links to different sections of a site in a div. Those text links have a simple hover state to change the text color when hovered. done.

I have a banner that contains 4 images that expand when hovered. done.

I would like to find a way to expand the images to their hovered state when i hover over the corresponding text links.

http://jsfiddle.net/Akitekt/vBDmw/8/

For instance, when you hover over "models | men" I would like for the first image in the banner to go to its hovered, "expanded" state.

When you hover over "actors | women" i want the 4th image to expand to its hovered state. etc...

I have done some searching around and have tried a few different methods but none of them have as i would like. A purely CSS solution would be great, but most of the methods i have tried require js.. I don't really care what I have to use to achieve the desired affect.


Thanks!

[resdog]

it's not really possible (to my knowledge) to this with just purely CSS. CSS is static, meaning it loads and is done. any interactive things you do (like hovering) is affected by the :hover psuedo class. But you can't call a completely different item and apply css styles to it outside of javascript. using jquery, you can do this pretty easily.

assign an id to all your menu items and all your other images you want to change. then, using jquery:

$("#menu-item-1 a").hover(
   function() {
      $("#image-tied-to-link").css({ "background-position" : "bottom center"});
});

That'll get your hover working across multiple items.

[Beefalo]

Thanks for your response!

I figured i would need to use jquery, which I use a decent amount, but lack an extended knowledge of at this time, so bare with my idiotic questions.

I gave each text link and corresponding image a unique ID and plugged them into the JS to see how it worked (using only the first image and link that need to relate to each other as a test)... I was not able to get it to respond in any way.... I am sure that i am prolly just going about this wrong, but would appreciate a second look.

jsfiddle


Thank you very much for your help... I can't believe that something that seems so simple could be giving me so much trouble.

[resdog]

Well, in the jsfiddle, you need to set the framework to jquery, not mootools.

then, in the actual call, you call it like:

$('.one').hover()

since the class .one is the anchor tag. The example I gave was in case you had it outside of the anchor.

If all of the anchors are going to do the same thing on hover, you can call just the anchors, like so:

$(".home_banner a").hover(function(){$(this).css('background-position', 'center bottom');
                                    },
                          function() {$(this).css('background-position','50% 50%');
                                     });

I forgot that with the hover, you have to tell it what to do on hover and on not hover. This code should do what you are wanting.

[alykins]

i don't mean this post to be rude in anyway... can you change the title to remove the word "Join" ... it may throw people false hits looking for help in SQL (again not trying to be mean or anything; there's know way you would know that unless you know SQL)

[resdog]

Originally Posted by alykins

i don't mean this post to be rude in anyway... can you change the title to remove the word "Join" ... it may throw people false hits looking for help in SQL (again not trying to be mean or anything; there's know way you would know that unless you know SQL)

Hopefully people would search for "SQL JOIN" and not just "JOIN" if they were looking for that. AND hopefully see that the result puts this post in the HTML & CSS forum.

[Beefalo]

Thank you for your responses! I really appreciate the help resdog.. I finally got it working!

I am marking this post solved and posting the jsfiddle below as the solution that i used.

allykins: I didn't really like making the title "join" but i really could not think of what other word to use? "Connect" doesn't quite work... "link" has two many different meanings in this context... What should i use?

SOLVED CODE: http://jsfiddle.net/Akitekt/69zbc/