동적으로 사진의 Z- 색인을 어떻게 변경합니까?

body 요소에 절대적으로 위치하는 사진 그룹에서 이미지의 z-index을 변경하고 싶습니다. 이미지 위에 마우스를 가져 가면 CSS의 웹 키트 변환을 사용하여 크기가 커지므로 좋겠습니다.동적으로 사진의 Z- 색인을 어떻게 변경합니까?

문제는 이미지의 상단에있는 HTML 파일 스택의 이미지가 더 높다는 것입니다. 파일의 z-index을 증가시키는 스크립트를 사용하여 롤오버 할 때 인접한 사진 뒤에 나타나지 않도록하고 싶습니다.

z-index 추가 파일을 찾는 데 약간의 시간을 들였지만 z-index을 jquery 파일로 점진적으로 무한대로 증가시키고 있지만 코드 작성 방법은 잘 모릅니다.

본질적으로 나는 크기가 증가 할 때 서로 겹치지 않도록 서로 가까이있는 그룹화를 원합니다.

그럴 가능성이 있습니까? 당신이 정확한 CSS의 ruls/클래스 이름을 필요로하는 경우

.photo_group .photo:hover { 
    z-index: 1000; /* May depend on over indices defined! */ 
}

일부 HTML을 게시하시기 바랍니다 : 같은 CSS 뭔가와

출처

2012-03-04 Erith

이 코드의 일부를 게시하시기 바랍니다? :. – BenM

CSS 변환은 위치 지정과 마찬가지로 Z- 색인에 영향을 미칩니다. http://forums.mozillazine.org/viewtopic.php?f=18&t=2435279 – FelipeAls

. 이것은 단지 샘플 일뿐입니다. 이처럼

출처

2012-03-04 12:03:22 Smamatti

는

<style> 
    img{ 
     position:absolute; 
    } 
    img.apple{ 
     top: 40px; 
     left: 0px; 
    } 
    img.ipod{ 
     top: 50px; 
     left: 50px; 
    } 
    img.thanks{ 
     top: 0px; 
     left: 0px; 
    } 
</style> 


<script type="text/javascript"> 
function increaseZIndex(obj){ 
    obj.style.zIndex = 1; 
} 
function decreaseZIndex(obj){ 
    obj.style.zIndex = 0; 
} 
</script> 
<img src='http://images.apple.com/home/images/billboard_25b_thankyou_headline_Yr4p8DedLk7y.png' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='thankyou'/> 
<img src='http://edibleapple.com/wp-content/uploads/2009/04/silver-apple-logo.png' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='apple'/> 
<img src='http://www.ipod.org.uk/ipod_nano.jpg' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='ipod' />

See it in action on JSFiddle

출처

2012-03-04 12:11:58 Jack

을 참조하십시오. – Erith

동적으로 사진의 Z- 색인을 어떻게 변경합니까?

답변

관련 문제