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。查看this link。

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

圆角与透明背景悬停效果

2 个答案: