coins arrondis avec effets d'arrière-plan transparents

Question

Sur mon site Web, chaque bouton de menu a ses coins arrondis à l'aide de la bibliothèque dd_roundies et dispose de gestionnaires de survol, de sortie de souris et d'onclick attribués via JQuery. Le code correspondant JS est:

$(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); 
}); 

Tout fonctionne très bien dans FF, mais dans IE7 il est un gâchis. Le problème le plus évident est que l'arrière-plan appliqué au passage de la souris est carré (et non arrondi) et, dans certains cas, l'arrière-plan ne disparaît pas après avoir cliqué sur un élément de menu puis sur mouseout.

Je ne pense pas que quiconque de comprendre comment résoudre le code ci-dessus, mais si vous connaissez une autre façon:

• applique des coins arrondis transparents à divs (tels que les émissions de couleur de l'élément parent à travers les coins arrondis)
• lorsque la couleur d'arrière-plan de la div arrondie est modifié (par exemple par un gestionnaire d'événements mouseover) la nouvelle couleur de fond occupe la même zone ronde
• œuvres dans IE7 et FF3 (au moins)

En d'autres termes, faites que le menu mentionné ci-dessus fonctionne dans IE comme dans FF. Je suis ouvert à remplacer les libs JS existants avec d'autres, en utilisant CSS à la place, ou quoi que .....

Merci, Don

Answer 1

J'ai eu la bonne chance à l'aide jQuery Corner pour les coins arrondis dans IE. Je l'ai testé et répond à tous vos besoins indiqués ci-dessus. Je voudrais également déplacer tous les changements de style basés sur le vol stationnaire dans un CSS. Bien que pour obtenir le vol stationnaire dans IE6 vous aurez besoin de quelque chose comme vous avez ci-dessus.

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

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

Answer 2

Je ne l'ai pas essayé personnellement, mais je crois qu'il ya une méthode pour obtenir PNGs - qui soutiennent la transparence alpha-couche - pour travailler dans IE en utilisant des composants HTML (de .htc). Découvrez this link.

En utilisant ce fichier .htc, vous devriez être en mesure d'utiliser des images d'arrière-plan PNG pour créer des coins arrondis anti-aliasés via CSS.