Search code examples
csshoverrounded-corners

css : round cornered div on hover

I am trying to accomplish something that seemed quite simple...

I have 3 divs that contain a radiobutton and some content:

     Content of DIV1,
[]   this can be as long or as tall
     as wanted

[]   Content of DIV2

[]   Content of DIV3

It's easy to create rounded corners for each div using any techniques found on other posts here. Yet, I haven't been able to do that only for the hover event, ie I would like to see the rounded box appear around the div only when the mouse hovers over it. Has anyone seen an example of this being done somewhere?

Edit: I'm already using Prototype and Scriptaculous. I can't add jQuery just for this.

Solution

  • this changes the CSS with jquery on the hover of a div

    print("<div id="output" class="div"></div>



<script>

    jQuery(document).ready(function() {

    $("#output").hover(function() {
        $(this).css({ 'background-color': 'yellow', 'font-weight': 'bolder' });
    }, function() {

    $(this).css({ 'background-color': 'blue', 'font-weight': 'bolder' });
    });


    }
    );

    ");