...

View Full Version : "Join" Hover states of separate DIV's



Beefalo
11-22-2011, 03:18 PM
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
11-22-2011, 08:43 PM
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
11-22-2011, 09:51 PM
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 (http://jsfiddle.net/Akitekt/vBDmw/14/)


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
11-23-2011, 01:28 PM
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
11-23-2011, 02:59 PM
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
11-23-2011, 09:08 PM
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
12-01-2011, 02:01 PM
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/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum