在我的网站上,每个菜单按钮都使用dd_roundies库来圆角处理,并通过JQuery分配了mouseover、mouseout和onclick处理程序。相关的JS代码如下:
在Firefox中一切都很好,但在IE7中却一团糟。最明显的问题是鼠标悬停时应用的背景是方形的(而不是圆形),有时在单击菜单项然后移开鼠标后,背景并没有消失。
我不指望任何人能够解决上述代码的问题,但如果您知道以下任何一种替代方法:
谢谢, 唐
$(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(至少)中工作
谢谢, 唐