예 : jquery와 둥근 모서리를 사용하여 예 :

Question

둥근 모서리를 사용하여 내 meny에서 크로스 브라우저 롤오버 효과를 코딩하려고하지만 ie에서 작동하지 않습니다. 나는 PIE를 심지어 약간의 pllugins로 사용하려고 노력하고 있었다. 그러나 그들은 일을 didnt한다.

$("document").ready(function() { 

var ancho = $('nav li.nav_active').width()+24; 

    $('nav li.nav_active').css({ 
      'background-color' : '#282828', 
      "height" : ancho+"px", 
      'margin-top' : "-"+(ancho-48)/2+"px", 
      '-moz-border-radius' : ancho/2+"px", 
      '-webkit-border-radius' : ancho/2+"px", 
      '-khtml-border-radius' : ancho/2+"px", 
      'border-radius' : ancho/2+"px", 
      'behavior' : 'url(../PIE.htc)', 
      '-webkit-box-shadow' : '0 8px 6px -6px black', 
      '-moz-box-shadow' : '0 8px 6px -6px black', 
      'box-shadow' : '0 8px 6px -6px black', 
      'border' : 'none' 
      }); 
      $('nav li.nav_active a').css({ 
      "line-height" : ancho+"px", 
      "color" : "white", 
      "font-family" : "'E-BoldCondensed'", 
      }); 






$(function() { 
    $('nav li:not(.nav_active)').mouseover(
     function() { 
      var ancho = $(this).width()+32; 
      $(this).css({ 
      "height" : ancho+"px", 
      'margin-top' : "-"+(ancho-48)/2+"px", 
      '-moz-border-radius' : ancho/2+"px", 
      '-webkit-border-radius' : ancho/2+"px", 
      '-khtml-border-radius' : ancho/2+"px", 
      'border-radius' : ancho/2+"px", 
      'behavior' : 'url(../PIE.htc)', 
      '-webkit-box-shadow' : '0 8px 6px -6px black', 
      '-moz-box-shadow' : '0 8px 6px -6px black', 
      'box-shadow' : '0 8px 6px -6px black', 
      }); 
      $(this,'a').css({ 
      "line-height" : ancho+"px", 
      }); 
     }); 
}); 

$(function() { 
    $('nav li:not(.nav_active)').mouseleave(
     function() { 

      $(this).css({ 
      "height" : "", 
      'margin-top' : "", 
      '-moz-border-radius' : "", 
      '-webkit-border-radius' : "", 
      '-khtml-border-radius' : "", 
      'border-radius' : "", 
      '-webkit-box-shadow' : '', 
      '-moz-box-shadow' : '', 
      'box-shadow' : '', 

      }); 
      $(this,'a').css({ 
      "line-height" : '', 
      }); 
     }); 
}); 

$(function() { 
    $('nav li').mousedown(
     function() { 
      var ancho = $(this).width()+32; 
      $(this).css({ 
      "height" : ancho+"px", 
      'margin-top' : "-"+(ancho-48)/2+"px", 
      '-moz-border-radius' : ancho/2+"px", 
      '-webkit-border-radius' : ancho/2+"px", 
      '-khtml-border-radius' : ancho/2+"px", 
      'border-radius' : ancho/2+"px", 
      'behavior' : 'url(../PIE.htc)', 
      '-webkit-box-shadow' : '', 
      '-moz-box-shadow' : '', 
      'box-shadow' : '', 
      }); 
      $(this,'a').css({ 
      "line-height" : ancho+"px", 
      }); 
     }); 
}); 

}); 

이 내 웹 사이트의 링크 :

이

내 코드입니다 www.miramarlab.com

Answer 1

당신은 그것을 CSS을 사용하여 (심지어 이미지없이) jquery없이 그것을 할 수

더 나아질 것입니다. 이 기사를 읽으십시오 : http://jonraasch.com/blog/css-rounded-corners-in-all-browsers. 희망이 있으면 도움이 될 것입니다.

Answer 2

htc 파일은 css가 아닌 html 페이지와 관련하여 호출해야합니다. htc 파일에는 .htaccess 파일에 추가해야하는 특정 MIME 유형이 있습니다.

루트 디렉토리에 HTC 파일을 저장하고 절대 경로로로드 :

behavior: url (http://www.miramarlab.com/PIE.htc);