내 페이지 탐색을 위해 접을 수있는 링크를 만들었습니다. 내 탐색 막대 (수직, nav div left float)의 모든 메뉴 항목도 자체 div (축소시 필요)입니다. 각 div는 텍스트가있는 버튼으로 스타일이 지정됩니다.근처의 모든 요소와 겹치기 위해 box_shadow 효과를 얻는 방법이 있습니까?
: hover 의사 요소에 대해 흐림 반경이 비교적 큰 연한 색상의 box_shadow를 사용했습니다. 이제 각 버튼/div 위로 마우스를 가져 가면 button/div가 켜지고 (좋음) 버튼/div 위에 빛이 쏟아져 나오는 것처럼 보입니다 (좋음). 불행하게도, 내가 가리키고있는 버튼/div는 불이 켜진 부분 (너무 좋지 않음) 위에 떠있는 것처럼 보입니다.
box_shadow 스타일링을 통해 div 위와 아래의 두 div를 겹치게 할 수있는 방법이 있습니까? 스타일은 링크가 아닌 div에만 적용되므로 내 사이트의 다른 링크는 영향을받지 않습니다.
완벽한 (IMO) 디자인으로가는 길의 99 %이지만이 작은 문제는 내가 일반적으로 참조로 사용하는 튜토리얼이나 아무렇지도 않은 곳에서는 아무 대답도없는 것 같습니다.
바이올린 : http://jsfiddle.net/nrkYr/5/embedded/result/
이미지 : http://desolosubhumus.webs.com/div%20overlap.jpg
사업부의 CSS :
.mH { cursor: pointer; width: 110px; background-color: #A0522D; color: #000000; font-family: "DreamerOne","sans-serif"; text-shadow: -1px -1px 1px #fc9c47, 1px 1px 1px #fc9c47, 1px 1px 2px #300b00; border: 0 solid #210a02; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #210a02; }
.mH:hover { cursor: pointer; width: 110px; background-color: #F5A77F; font-family: "DreamerOne","sans-serif"; color: #c96914; text-shadow: -1px -1px 1px #210a02, 1px 1px 1px #210a02, 1px 1px 2px #000000; border: 0 solid #876e68; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #432c24, 1px 1px 35px 1px #D87824, -1px -1px 35px 1px #D87824; }
* 업데이트 : 공급 업체 접두사를 필요로하는 내 말에 버그가되었다. 나는 두 브라우저를 모두 다시 다운로드하고 다시 설치했는데 이제 네 개의 브라우저에서 상자 그림자와 테두리 반경이 작동합니다. Safari는 기본 '구매 Apple 물건'페이지에서 벗어나면 충돌합니다. 그렇지 않으면 테스트 해 볼 수도 있습니다. . 나는 여기서 CSS와 Fiddle을 단지 초 만에 업데이트 할 것이다. G'bye cruft ...
당신이 [바이올린] 우리가보고 (http://jsfiddle.net/)에 대한 만들시겠습니까? 또한,'border-radius'와'box-shadow'에 더 이상 공급 업체 접두어를 사용할 필요가 없습니다. –
Opera, IE, FF 및 Chrome (최신 버전)에서 테스트했으며 공급 업체 프리픽스없이 FF 또는 Chrome에서 작동하지 않는 것으로 나타났습니다. 아마 이것은 내 끝의 버그입니다. 나는 바이올린이 무엇인지 알지 못합니다 (바이올린의 시골 풍의 이름은 제외하고). –
Fiddles를 만들 때 최소한의 예를 들어보십시오. 여전히 문제를 시연하면서 가능한 한 작게 만드십시오. –