마우스 오버시 다른 이미지 위에 이미지를 배치하는 방법은 무엇입니까?
Sagie
해결책을 찾으려고했지만 찾을 수 없었습니다. 각 이미지가 다른 이미지에있는 경우 첫 번째 이미지 위로 마우스를 가져 가면 구부러진 이미지가 첫 번째 이미지 위에있게됩니다. 예를 들면 :
일반 : 
마우스 오버 :
기본에서 두 번째 및 세 번째 이미지는 첫 번째 이미지 뒤에 있습니다. 내 영어에 대해 미안하고 미리 감사드립니다!
Dodov
이 솔루션을 사용하려면 상자가 컨테이너에 절대 위치해야합니다.
var prop = "bottom",
moveAmount = 50;
$('.container').hover(
function() {
var moved = $(this).find(".box");
for (var i = (moved.length - 1), pad = 0; i >= 0; i--) {
$(moved[i]).css(prop, (pad++ * moveAmount) + "px");
}
},
function() {
var moved = $(this).find(".box");
for (var i = 0; i < moved.length; i++) {
$(moved[i]).css(prop, "0px");
}
}
);.container {
background-color: #eeeeee;
position: relative;
width: 45px;
height: 45px;
}
.box {
background: red;
width: 40px;
height: 40px;
transition: bottom 0.3s ease-in-out;
position: absolute;
bottom: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br>
<div class="container">
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
fabricjs 캔버스 이미지를 다른 배경 이미지에 저장하는 방법은 무엇입니까?
- 2
MATLAB Guide에서 마우스로 이미지 위로 마우스를 가져갈 때 다른 정보를 표시하는 방법은 무엇입니까?
- 3
한 이미지보기를 다른 이미지 위에 표시하는 방법은 무엇입니까?
- 4
텍스트를 이미지 오른쪽에 정렬하면서 이미지를 중앙에 배치하는 방법은 무엇입니까?
- 5
jQuery를 사용하여 마우스 오버시 이미지를 변경하는 방법은 무엇입니까?
- 6
마우스 오버시 및 마우스가 움직이지 않을 때 배경 GIF를 중지하고 JavaScript에서 움직일 때 및 마우스 오버시 GIF를 다시 시작하는 방법은 무엇입니까?
- 7
마우스 오버시 원형 매핑 된 이미지를 변경하는 방법은 무엇입니까?
- 8
마우스 오버시 원형 이미지를 어둡게하는 방법은 무엇입니까?
- 9
마우스 오버 후 이전 위치에 p 태그를 유지하는 방법은 무엇입니까?
- 10
Android에서 캔버스를 사용하여 다른 이미지 안에 이미지를 추가하는 방법은 무엇입니까?
- 11
캔버스의 다른 모든 콘텐츠 뒤에 이미지를 그리는 방법은 무엇입니까?
- 12
캔버스에 이미지를 그릴 때마다 참조를 얻는 방법은 무엇입니까?
- 13
캔버스를 사용하여 한 이미지를 다른 이미지에 붙여 넣는 방법은 무엇입니까?
- 14
WPF 버튼 위로 마우스를 가져갈 때 이미지를 변경하는 이미지 버튼을 만드는 방법은 무엇입니까?
- 15
마우스 오버시 앵커 태그 내의 이미지 태그에 클래스를 추가하는 방법은 무엇입니까?
- 16
버튼 요소의 텍스트 아래에 이미지를 배치하는 방법은 무엇입니까?
- 17
Raphael에서 커서가 다른 이미지에있을 때 마우스 오버 이벤트가 이미지에서 초점을 잃는 것을 방지하는 방법은 무엇입니까?
- 18
이미지 위에있는 버튼 위로 마우스를 가져갈 때 이미지에 마우스 오버 효과를 적용하는 방법은 무엇입니까?
- 19
다른 이미지 내에서 특정 이미지의 위치를 얻는 방법은 무엇입니까?
- 20
워드 프레스에서 마우스 오버시 제품 이미지를 뒤집는 방법은 무엇입니까?
- 21
Silverstripe 3 : 함수의 다른 페이지에 표시하기 위해 여러 페이지에서 이미지를 가져 오는 방법은 무엇입니까?
- 22
xcode에서 이미지 위에 이미지를 오버레이하는 방법은 무엇입니까?
- 23
: 이미지에 마우스 오버하면 다른 이미지가 표시됩니다.
- 24
다른 상자 위에 이미지를 놓는 방법은 무엇입니까?
- 25
Logitech G700에서 마이크로 스위치 (왼쪽 / 오른쪽 "마우스 버튼")를 변경하는 방법은 무엇입니까?
- 26
Logitech G700에서 마이크로 스위치 (왼쪽 / 오른쪽 "마우스 버튼")를 변경하는 방법은 무엇입니까?
- 27
다른 링크 위로 마우스를 가져갈 때 메뉴 이미지를 변경하는 방법은 무엇입니까?
- 28
다른 div의 이미지로 div를 중앙에 배치하는 방법은 무엇입니까?
- 29
캔버스에 이미지를 추가하고 그 위에 회전 된 텍스트를 배치하는 방법은 무엇입니까?
몇 마디 만하겠습니다