You can’t do it using straight CSS. I’m guessing that the page uses Javascript/jQuery to do it, it’s not too difficult (if you know jQuery).
There are four images of the cell phone inserted into the page, and the default CSS is to set the display property to none. When the mouse enters one of the four paragraph divs, it kicks off an event handler which adds the jdb class to the image that needs to be displayed and removes the jdb class from all of the other images. Then there’s a CSS rule which sets the display property of the jdb class to block, so that’s how the image gets displayed.
@crouchingbruin: A little help with the code please.
OK, so here is an example that I put together. You can see that as you move the mouse over the different <div>s, the image below changes.
I’ve copied the code into this pastebin. At the top, inside of the <script> tags, is the jQuery used to capture the mouseenter events. There are four different event handlers, one for each of the four <div>s (div1 through div4). Each event handler has two lines associated with it. The first line removes the showphone class from each phone image element, and the second line adds the showphone class to just the image for that div.
In the <style> section are the CSS rules. The first rule sets the phone images to not display. However, this rule displays the image which has the showphone class added to it:
.phone.showphone {
display: block;
}
@crouchingbruin: Thanks a ton that helps a lot !! Really appreciate it.
@crouchingbruin – Can this be done without jQuery?
@srknight, not that I know of. You can’t do it using just CSS. Maybe you can do something like this using Flash, but developers are moving away from Flash. You need some way of detecting when the mouse enters a certain element, and then changing the properties of a different element, which, to me, means you need to use some sort of client side script, so Javascript/jQuery seem like the obvious choices. Are you concerned about users who turn off Javascript on their browsers?
