圆角与透明背景悬停效果

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创建抗锯齿圆角。