CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer
Dónal
Dónal

Reputation: 187399

rounded corners with transparent background hover effects

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:

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

Upvotes: 3

Views: 3491

Answers (2)

Calvin
Calvin

Reputation: 4619

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.

Upvotes: 0

Shaun Humphries
Shaun Humphries

Reputation: 1035

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

Upvotes: 2

Related Questions