закругленные углы с прозрачным фоном

Question

На моем веб-сайте каждая кнопка меню имеет свои углы, округленные с помощью библиотеки dd_roundies , и имеет обработчики mouseover, mouseout и onclick, назначенные через JQuery. Соответствующий код JS:

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

Все это очень хорошо работает в FF, но в IE7 это беспорядок. Наиболее очевидная проблема заключается в том, что фон, который применяется при наведении мыши, является квадратным (а не круглым), и в некоторых случаях фон не исчезает после нажатия на элемент меню и затем при наведении мыши.

Я не ожидаю, что кто-нибудь выяснит, как исправить приведенный выше код, но если вы знаете альтернативный способ:

• применить прозрачные закругленные углы к элементам div (чтобы цвет родительского элемента был показан через закругленные углы)
• когда цвет фона округленного div изменяется (например, обработчиком события наведения мыши), новый цвет фона занимает ту же самую круглую область
• работает в IE7 и FF3 (как минимум)

Другими словами, заставьте вышеупомянутое меню работать в IE так же, как в FF. Я открыт для замены существующих библиотек JS другими, используя вместо этого CSS или любой другой .....

Спасибо, Дон

Answer 1

Мне повезло, используя jQuery Corner для закругленных углов в IE. Я проверил его, и он отвечает всем вашим требованиям, указанным выше.

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

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

Я бы также перенес любые изменения стиля при наведении курсора в CSS. Хотя для того, чтобы навести курсор на работу в IE6, вам понадобится что-то похожее на то, что есть у вас выше.

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

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

Answer 2

Я не пробовал это лично, но я считаю, что есть способ заставить PNG - которые поддерживают прозрачность альфа-слоя - работать в IE с использованием HTML-компонентов (.htc). Проверьте эту ссылку .

Используя этот файл .htc, вы сможете использовать фоновые изображения PNG для создания сглаженных закругленных углов с помощью CSS.