#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Posts
    8
    Rep Power
    0

    How to hover on 1 div to change 3 divs


    I have a page that includes three divs. The left div is SLA1, the second SLA2. The third div is an enrollment dialog. A user selects the SLA using a radio input.

    I have SLA1 styled with a background image that is at this time static. I have SLA2 styled with an image that appears on hover.

    What I'd like to do is have SLA1 styled with the background image until SLA2 has been hovered, then I'd like SLA1 to be absent the image. I'd also like to have the enrollment dialog change so that when the user hovers over SLA2, a slightly different dialog appears. Furthermore, once the user has selected the SLA, I'd like the associated dialog box to stay displayed so the user can enter data.

    I'd like to use as little javascript as possible.

    Thanks for the help.
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    not knowing the actual markup, your best bet is to do this with javascript. Otherwise you need to make the hover element the parent of the others.
    (ie)
    Code:
    <div id="hoverelement">
        <div>child element</div>
        <div>child element</div>
        <div>child element</div>
    </div>
    Code:
    #hoverelement:hover div{property:value;}/*targets the child div */

IMN logo majestic logo threadwatch logo seochat tools logo