Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS “Join” hover states of separate DIV’s?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #35271
    Arkitekt
    Participant

    I have already gotten a lot of help from this forum on getting my site to the point is at now, but i am at another roadblock.

    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!

    #91092
    Arkitekt
    Participant

    bueller?

    #91148

    What you want to do can be done with a fair bit of stuffing around. I have made a slightly simpler version that doesn’t require as much styling (tabbing between links also works): http://jsfiddle.net/sl1dr/ZMn7w/

    #91158
    tomslick
    Member

    Here is a version that uses your markup, a few id tags and a little script.
    http://jsfiddle.net/eQyHT/1/

    #91329
    Arkitekt
    Participant

    Absolutely perfect Tom! That is exactly what I was looking for!

    Works perfectly!

    Thanks for both of yall’s help!

    -Clark

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.