CSS : 3 개의 누적 이미지 위로 마우스를 가져 가기

각 앨범에 누적 사진이 포함 된 사진 갤러리를 만들려고합니다. 앨범을 가져 가면 한 이미지가 왼쪽으로 20 회전하고 한 이미지는 오른쪽으로 20 회전하므로 한 번에 3 개의 이미지가 표시됩니다.CSS : 3 개의 누적 이미지 위로 마우스를 가져 가기

저는 문제는 호버 신호가 스택의 최상위 이미지에 붙어 있다고 생각합니다. 나는 아래에서 시도한 것을 게시 할 것이다. 어떤 아이디어? 가능한가? 그냥이 변경

<!DOCTYPE html> 
<head> 
<title>Just-CSS: Rotate stacked images on hover</title> 
<style> 
body { 
    background-color: black; 
    color: white; 
    padding: 20px; 
    } 
ul { 
    margin: 0; 
    padding: 0; 
    } 
ul li { 
    list-style: none; 
    position: absolute; 
    } 

img { -webkit-transition: all 0.2s; } 
img:hover.green {-webkit-transform: rotate(-20deg);} 
img:hover.blue {-webkit-transform: rotate(20deg);} 

img { border: 4px solid white; } 
img.red { background-color: red; } 
img.green { background-color: green; } 
img.blue { background-color: blue; } 
</style> 
</head> 
<body> 
<ul class="img-stack"> 
    <li><img class="red" width="100" height="100" src=""></li> 
    <li><img class="green" width="100" height="100" src=""></li> 
    <li><img class="blue" width="100" height="100" src=""></li> 
</ul> 
</body> 
</html>

난 당신이 자바 스크립트와 함께 할 수 있습니다 알고 있지만 난 그냥 그렇게하시기 바랍니다 어떤 자바 스크립트 :

출처

2011-07-01 Ola

에 CSS와 함께 연주 해요 :

img:hover.green {-webkit-transform: rotate(-20deg);} 
img:hover.blue {-webkit-transform: rotate(20deg);}

다음으로 :

ul:hover img.green {-webkit-transform: rotate(-20deg);} 
ul:hover img.blue {-webkit-transform: rotate(20deg);}

(내가 아는까지) 당신이 한 번에 하나의 :hover 선택을 활성화 할 수 있기 때문에, 그냥 부모 요소에 마우스 오버를 캡처합니다.

출처

2011-07-01 11:26:59

img:hover.green {-webkit-transform: rotate(-20deg);}

img.green:hover {-webkit-transform: rotate(-20deg);}

출처

2011-07-01 11:25:49

ul.img-stack을 래퍼로 사용해야합니다. 각 사진이 아닌 앨범 자체의 호버링 이벤트를 트리거합니다.

ul.img-stack:hover .green {-webkit-transform: rotate(-20deg);} 
ul.img-stack:hover .blue {-webkit-transform: rotate(20deg);}

출처

2011-07-01 11:27:02

CSS : 3 개의 누적 이미지 위로 마우스를 가져 가기

답변

관련 문제