rounded corners with transparent background hover effects

Question

Hi,

On my website, each menu button has it's corners rounded using the dd_roundies library, and has mouseover, mouseout, and onclick handlers assigned via JQuery. The relevant JS code is:

$(function(){

    // Add an event handler to the menu items that changes the background colour on mouse-over
    // and reverts it on mouse-out.
    $('div.nav-box').hover(
      function() {
        $(this).addClass('highlight');
        document.body.style.cursor = 'pointer';
      }, 
      function() {
        $(this).removeClass('highlight');
        document.body.style.cursor = 'default';
      }
    );

    // Add an onclick handler to each menu item
    $('div.nav-box').click(
      function() {
        // Change the current page to the 'href' value of the nested <a> element
        document.location.href = $(this).find("a:first").attr("href");
      }
    );

    // Round the corners of the menu items 
    DD_roundies.addRule('.nav-box', '20px', true);
});

It all works very nicely in FF, but in IE7 it's a mess. The most obvious problem is that the background that is applied on mouseover is square (not round), and on some occasions the background doesn't disappear after you click on on a menu item and then mouseout.

I don't expect anyone to figure out how to fix the code above, but if you know of an alternative way to:

• apply transparent rounded corners to divs (such that the parent element's colour shows through the rounded corners)
• when the background colour of the rounded div is changed (e.g. by a mouseover event handler) the new background colour occupies the same round area
• works in IE7 and FF3 (at least)

In other words, make the menu referred to above work in IE as it does in FF. I'm open to replacing the existing JS libs with others, using CSS instead, or whatever.....

Thanks, Don

Answer 1

I have had good luck using jQuery Corner for rounded corners in IE. I have tested it and it meets all your needs stated above.

$(document).ready(function(){
    $("div.nav-box").corner("20px");

    $("div.nav-box").click(function(){
        //
    });
});

I would also move any hover based style changes into a CSS. Although to get the hover to work in IE6 you will need to something like you have above.

div.nav-box
{
    cursor: default;
    background-color: Blue;
}

div.nav-box:hover
{
    cursor: pointer;
    background-color: Red;
}

Answer 2

I haven't tried this personally, but I believe that there's a method to get PNGs--which support alpha-layer transparency--to work in IE using HTML Components (.htc). Check out this link.

Using that .htc file, you should be able to use PNG background images to create anti-aliased rounded corners through CSS.