Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post "Join" Hover states of separate DIV's

    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!

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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:

    Code:
    $("#menu-item-1 a").hover(
       function() {
          $("#image-tied-to-link").css({ "background-position" : "bottom center"});
    });
    That'll get your hover working across multiple items.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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:

    Code:
    $(".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.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,811
    Thanks
    42
    Thanked 199 Times in 198 Posts
    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)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Quote Originally Posted by alykins View Post
    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.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved

    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/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •