Jquery는로드시 박스 섀도를 끕니다.

상자 그림자를 숨기고 싶지만 사용자가 자바 스크립트를 사용하도록 설정 한 경우 주변에 CSS3 상자 그림자가있는 요소가 있습니다.Jquery는로드시 박스 섀도를 끕니다.

현재 아래에 표시된 코드를 사용하여 다른 요소를 숨기고이 방법은 상자 그림자를 제외하고는 완벽하게 작동합니다. 나는 'box-shadow : none'이 아닌 다른 코드를 넣어서 테스트를 해봤 다. 예상 한대로 항상 작동하므로 CSS3 상자 그림자 속성과 jquery의 호환성 문제가 있다고 가정한다.

누구든지이 문제를 해결할 방법을 생각할 수 있습니까? 또는 페이지로드시 box-shadow 속성을 해제하는 또 다른 방법입니다.

미리 도움을 청하십시오. 하위 메뉴 헤더

.sub-menu-header{ 
    -moz-box-shadow: 1px 1px 5px #000; 
    -webkit-box-shadow: 1px 1px 5px #000; 
    box-shadow: 1px 1px 5px #000; 
    border:1px solid #CCC; 
    cursor:pointer; 
}

출처

2011-11-22 Phil

는'박스 shadow'의 B를 가지고 동일한 선택자 [specificity] (http://www.w3.org/TR/CSS2/cascade.html#specificity) ('.sub-menu-header')로 설정 했습니까? – jensgram

네, 서브 - 메뉴 헤더에 대한 CSS 코드를 추가하여 명확하게했습니다 – Phil

당신은 당신의 HTML 태그에 노 JS 클래스를 추가 할 수 있습니다 상자 그림자 속성이 CSS의 클래스 선택하는 것보다 다른 방법을 지정하지 않은 경우 확인 당신의 스타일 :

.no-js .sub-menu-header{ 
    -moz-box-shadow: 1px 1px 5px #000; 
    -webkit-box-shadow: 1px 1px 5px #000; 
    box-shadow: 1px 1px 5px #000; 
} 
.sub-menu-header{ 
    border:1px solid #CCC; 
    cursor:pointer; 
}

그런 다음 당신의 자바 스크립트 파일에없는 JS 클래스를 제거 :

$("html").removeClass("no-js");

출처

2011-11-22 10:07:12 dodger

이것은 훌륭하게 일했습니다, 대단히 감사합니다! – Phil

당신이 당신의 CSS를 수정할 수없는 경우, 그것을 할 수있는 더 좋은 방법에 대한

$('html').append('<style type="text/css">.sub-menu{width:897px;display:none;} .sub-menu-header{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}</style>');

CSS는 jQuery의 CSS 방법을 사용하는 것입니다. <html class="no-js">

추가 :

이

$(document).ready(function() { 
    $(".sub-menu-header").css("box-shadow", "none"); 
});

출처

2011-11-22 10:03:53 Przemek

도움을 주셔서 감사합니다.이 기능이 작동하지만 상자 그림자가 숨겨지기 전에 깜박이며 원하지 않습니다. 사용자는 무엇이든을보아야합니다 – Phil

Jquery는로드시 박스 섀도를 끕니다.

답변

관련 문제