Css: round corner div on a pair
I am trying to accomplish something like simple ...
I have 3 div
that contain a radio object 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 of the methods found on other posts here. However, I was unable to do this just for the hover event, i.e. I would like to see that the rounded rectangle appears around the div only when the mouse hovers over it. Has anyone seen an example of how this is done somewhere?
Edit . I am already using Prototype and Scriptaculous. I cannot add jQuery just for this.
source to share
this changes CSS with jquery on hover 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' });
});
}
);
");
source to share
Part of the problem that can arise is that in most CSS implementations (and browser implementations of this technology), divs don't have a: hover method to which you can attach style rules.
As Antony pointed out, jQuery can get around this.
How I would attack it (since I haven't studied jQuery), one has to set the tag (which has a hover method) to display: block, with all the companion rules you would set as if it were a div, expand it to fill containing a div, and then of course add the rounded corner rules to hover mode.
Another way is to surround your div with a tag, but again you are still setting the display: block, background, and other rules that don't really belong.
This is all a gross abuse of syntax, so back up your work before trying to suggest anything.
Good luck - it would be easier to just keep it rounded on the div all the time and think of something else you can do to trigger the hover effect.
source to share
I am sure you can do it with jquery.
http://docs.jquery.com/CSS
http://docs.jquery.com/Events/hover
source to share