CSS 다른 두 개의 이미지 위에 마우스를 올리면 이미지가 표시됩니다.

Question

div 및 배경 이미지 스타일 속성을 사용하여 다른 이미지 (첫 번째 이미지는 아바타이고 두 번째 이미지는 프레임)에 이미지를 렌더링합니다. 문제는 또한 사용자가 마우스를 올려 놓았을 때 이미지가 2 개 모두에 나타나기를 바랍니다. Z-index로 2 시간 넘게 플레이했는데 성공하지 못했습니다. 마우스를 올리면 50 %의 시간 동안 작동합니다 (Z- 색인은 호버링과 아바타에 대해 동일하므로) 또는 아바타는 호버가 표시 될 때만 나타납니다. 내가 해봤 코드 중 하나는 (hoverimage도 볼 수있는 경우에만 아바타 방송) :

이

echo "<div style=\"display:inline-block; width:81px; height:65px;\">"; 
echo "<div style=\"display:inline-block; position:relative; z-index:2; top:2px; left:17px; width:47px; height:47px; background:url('$avatarpath')\"></div>"; 
echo "<div style=\"display:inline-block; position:relative; top:-47px; z-index:3; left:15px; width:51px; height:51px;\" class=\"pportraita\"></div>"; 
echo "</div>"; 

CSS :

.pportraita { 
position: relative; 
z-index: 1; 
background: url('../img/matchpage/bg_memberavatar.png') bottom no-repeat; 
    } 

.pportraita:hover { 
position: relative; 
z-index: 1; 
background: url('../img/matchpage/remove.png') bottom no-repeat; 
    } 

bg_memberavatar.png이 remove.png 내가 원하는 이미지 프레임입니다 매달려있을 때에 만 보여줄 수 있습니다. 어떻게 수행하나요?

Answer 1

나는 이것이 당신이 필요로하는 것보다 더 많거나 적습니까? 절대 위치는 당신이 필요 반면

http://jsfiddle.net/h36au/

당신은, 모든 요소에 대한 상대 위치를 사용하고 있습니다.

• 상대 요소가 페이지 레이아웃 취출 수단이지만 차원 레이아웃에 영향을 유지 - 그리고 그 위치는 절대적/상대적 위치 자식 요소에 영향을 미칠 것이다.

• 절대적으로 요소가 완전히 레이아웃에서 제거되어 절대적으로 창에 배치되거나 첫 번째로 배치 된 상위 요소가있는 경우 (후자는 내 예제에서 사용한 것임)를 의미합니다.

는

... 당신은 조금 무슨 일이 코드에서 벌어지고 이해 희망