How to hover on 1 div to change 3 divs

Dev Shed Forums Sponsor:

February 16th, 2013, 06:19 AM

jeffshearer

Registered User

Join Date: Jun 2009

Posts: 8

Time spent in forums: 1 h 32 m
Reputation 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.

February 19th, 2013, 08:39 AM

aeternus

For POny!

Join Date: Apr 2012

Location: Amsterdam

Posts: 416

Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114

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 */

__________________
PHP Tutorial

Viewing: Dev Shed Forums > Web Design > CSS Help > How to hover on 1 div to change 3 divs

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump