圆角和透明背景悬停效果

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

在Firefox中一切都很好，但在IE7中却一团糟。最明显的问题是鼠标悬停时应用的背景是方形的（而不是圆形），有时在单击菜单项然后移开鼠标后，背景并没有消失。

我不指望任何人能够解决上述代码的问题，但如果您知道以下任何一种替代方法：

• 将透明的圆角应用于div（使父元素的颜色显示在圆角处）
• 当圆角div的背景颜色改变时（例如通过mouseover事件处理程序），新的背景颜色占据相同的圆形区域
• 在IE7和FF3（至少）中工作

换句话说，让上面提到的菜单在IE中像在Firefox中一样工作。我可以使用CSS替换现有的JS库，或者采用其他方式... ...

谢谢， 唐

- Don

---

问题在于IE7（更不用提IE6了）可能出现很多问题——即使IE7支持PNG透明度，但它仍然非常慢等等。因此，最终我决定IE用户就别想要圆角了。如果你做不到，那就太糟糕了 :) - Tamas Czinege

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

- Shaun

Answer 2

我个人没有尝试过，但我相信有一种方法可以使用HTML组件(.htc)在IE中获取支持alpha层透明度的PNG。请查看this link。

使用那个.htc文件，你应该能够使用PNG背景图像通过CSS创建反锯齿圆角。

- Calvin