CSS 또는 Jquery로 대각선 가리 키기

마우스가 올라 오면 특정 이미지를 만들고 싶습니다. 이미지가 다른 이미지로 바뀝니다. 이것은 링크를 만들어 CSS를 사용하는 것이 쉽습니다.이 링크는 이미지가 변경되는 부분으로 작동하며 사각형 호버를 만들 때 아무런 문제가 없습니다.CSS 또는 Jquery로 대각선 가리 키기

하지만 대각선 이미지 위에 마우스를 올려 놓고 싶습니다. 어떻게해야합니까?

For Example this image : - 링크 1에서 마우스를 가리면 이미지가 흰색 이미지로 바뀝니다.

출처

2013-04-06 user2217482

대각선 자료 인 afaik는 DOM에 없습니다. 당신은 이것을 위해 플래시를 사용해야합니다 ... – MarioDS

플래시는 * 결코 * 대답이 아닙니다. 달리 제안하는 사람들은 내 PC에 플래시 플러그인/드라이버가 지속적으로 업데이트되고 끊임없이 충돌하는 * 이유 *가 있습니다. –

사용자 정의 모양으로 작업하려면 SVG를 사용하는 것이 좋습니다 (그러나 이전 버전에서는 지원되지 않습니다. IE 버전) – trajce

가장 간단한 방법은 투명한 영역이있는 이미지 (오버레이)를 사용하는 것입니다. 이미지를 사용하지 않으려는 경우에만 경계 삼각형을 사용하여 삼각형/대각선을 만들 수 있습니다. 당신이 스투 니콜스 '사이트에 후자의 모습 선택한 경우 - www.cssplay.com을, 그게 내가 몇 년 전에 그것을 배운 곳 -하지만 CSS 요청으로

설명가는대로 상당히 고급입니다주의 :

을 대각선 이미지를 사용하여 대각선 이미지가 왼쪽에서 오른쪽으로 기울어 지므로 (/// /) 이미지가 함께 나타나지 않는 것을 의미합니다. 하나의 기울기의 왼쪽 하단이 오른쪽 상단과 일치하게됩니다. 이전의 기울기와 반대 방향 (오른쪽 하단)

z- 색인을 사용하여 중첩하거나 상대적으로 또는 절대 위치 :

.img1 { width: 100px; position: relative; z-index: 1; } 
.img2 { width: 100px; position: relative; left: -100px; z-index: 2; } 
.img3 { width: 100px; position: relative; left: -200px; z-index: 3; } 
.img4 { width: 100px; position: relative; left: -300px; z-index: 4; }

상기 따라 각각의 이미지가 이동하여 큰 차이를 가질 것이다은 정확한 거리를 화상의 크기 및 경사 각도에 의존 할 것이다. 맨 처음에는 이미지 자체보다는 포장을 움직이기를 원할 것입니다. 그렇지 않으면 클릭 할 수있는 영역이 이미지 위에 표시되지 않습니다.

출처

2013-04-06 20:25:46

에 대한 첫 번째 방법을 설명하겠습니까? 실제로 이미지를 사용하고 싶습니다. – user2217482

mm이 이미지 사이에 간격을 만들지 않습니다. ?? – user2217482

아니, 정확히 예제가 설명하는 것입니다. –

CSS 또는 Jquery로 대각선 가리 키기

답변

관련 문제