css : round cornered div on hover

Question

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.

Answer 1

I am sure you could do it with jquery.
http://docs.jquery.com/CSS

http://docs.jquery.com/Events/hover

Answer 2

Part of the problem you might be having lies in the fact that in most implementations of CSS (and the browser's implementation of that technology), a div doesn't have a :hover method that you can attach style rules to.

As Antony mentioned, jQuery might be able to get around this.

How I would attack it (since I haven't explored jQuery) is to set your a tag (which does have a hover method) to display:block, with all of the attendant rules you would set as if it were a div, make it expand to fill the containing div, and then of course, add your rounded corner rules to the hover.

Another way is to surround your div with the a tag, but then again, you're still setting display:block, background and other rules that don't really belong in a.

This is all a brutal abuse of the syntax, so back up your work before trying anything I suggest.

Good luck - it would probably be easier to just keep it rounded on the div all the time, and think of something else you can do to call out a hover effect.

Answer 3

Css define the hover pseudo selector you can leverage on it for resolving you problem or use javascript to simulate that effect adding/removing a css class to the correct div on the events onMouseEnter onMouseOut.

Answer 4

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' });
    });


    }
    );

");