둥근 모서리 투명한 배경 마우스 오버 효과

Question

내 웹 사이트의 각 메뉴 단추는 dd_roundies 라이브러리를 사용하여 모서리를 둥글게하고 마우스 오버, 마우스 아웃 및 onclick 처리기가 JQuery를 통해 할당됩니다. 관련 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 libs와 교체하는 대신 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

나는 개인적으로이 시도하지 않은,하지만 난 PNG 파일을 얻을 수있는 방법이 있다고 생각 - 알파 - 레이어의 투명도를 지원하는 - HTML 구성 요소 (하며 .htc)를 사용하여 IE에서 작동 할 수 있습니다. this link을 확인하십시오.

.htc 파일을 사용하면 PNG 배경 이미지를 사용하여 CSS를 통해 앤티 앨리어싱 된 둥근 모서리를 만들 수 있습니다.