Question

I have 3 radio buttons 1) left, 2) right 3) none

so when I hover over the radio button I am showing the following 3 divs, each with different CSS.

#popupdiv img {
    float: right;
    clear: right;
    margin: 15px
}

#popupdiv img {
    float: left;
    clear: left;
    margin: 15px
}

#popupdiv img {
    float: random; //i want the image to be display randomly in the div
    clear: random;
    margin: 15px
}

<div id='popupdiv'>
    <img src='http://www.hostname.com/images/a.jpg' width='100' height='100' border='0' />
    <img src='http://www.hostname.com/features/b.jpg' width='100' height='100' border='0'/>
    <p>same text for all three divs.....
</div>

What I want to do is to have one div and change the css based on which radio button the user hovers over. How do I do this?

Answer 1

For the tag you use in this post (jquery) I suppose you are using that library, with jquery it is very easy, I think you can do that with something like this:

$('#radio1').mouseover(function(){
    $(this).removeClass('classname1 classname2');
    $(this).addClass('classname');
});