圓角與透明背景懸停效果

Question

在我的網站上，每個菜單按鈕都使用dd_roundies庫使其圓角，並具有通過JQuery分配的mouseover，mouseout和onclick處理程序。 相關的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

我在IE中使用jQuery Corner獲取圓角很幸運。 我測試了它，它滿足了上述所有需求。

$(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

我沒有嘗試過這個，但我相信有一種方法可以使用HTML組件（.htc）在IE中使用支持alpha層透明度的PNG。 看看這個鏈接 。

使用該.htc文件，您應該能夠使用PNG背景圖像通過CSS創建抗鋸齒圓角。