헤더 닫기 버튼 CSS 스타일링 문제

Question

나는 다음과 같은 이미지를 클릭하면 확대 이미지를 표시 할 수 있습니다. div 그것을 위해 스타일링

<div id="mainImage"> 
    ;;; 
</div> 
<div id="zoomPdpImage" style="display:none;z-index:2000;background-color:silver;"> 
<div id="closeZoomImgButton"> 
<span class="ui-dialog-title" id="ui-dialog-title-dialog-form">&nbsp;</span> 
    <a href="#" class="close" role="button"> 
     <span>close</span>   
    </a> 
</div> 
<img src="http://localhost:/..." alt="${imageAlt}" title="image"/> 
</div> 

및 : 그래서

#closeZoomImgButton 
{ 
width: auto; 
height: 30px; 
position: relative; 
text-align: center; 
background: #000 url("../images/Close_X_Icon.png") no-repeat 570px 10px; 
} 
#closeZoomImgButton .close 
{ 
    border:0 none; 
    border-radius:0 0 0 0; 
    height:32px; 
    margin:0; 
    padding:0; 
    right:0; 
    top:0; 
    width:32px; 
    position: absolute; 
    display:none; 
} 
#closeZoomImgButton .close span{margin:0;padding:0;} 
#closeZoomImgButton .close:hover, #closeZoomImgButton .close:focus { padding:0; } 

그것은 jquery show(), and hide(), 를 사용하지만, 메신저가 스타일을하는 방법을 못하고하여이하도록되어 일을, 나는 다음과 같은 코드를 사용하고 있습니다 확대/축소 된 이미지를 클릭하고 닫을 수 있지만 전체 헤더를 클릭 할 수있게되었습니다. 닫기 버튼 만 클릭 할 수 있고 포커스가 있어야하고 클릭 할 수 있음을 알 수있는 호버 효과가 있어야합니다.

제안 사항은 무엇입니까?

Answer 1

중요합니다, 당신은 폐쇄의 범위에 ID를 추가하지 않았다. 당신이 그것을 숨길 가까운 범위를 클릭하면 이제

<span id="closeZoomImgButton">close</span> 

: 여기에

<span>close</span> 

:

여기에 업데이트 된 바이올린 http://jsfiddle.net/WFyMu/5/

를 참조하십시오 나는이 변경되었습니다. 그러나 이것이 당신이 원한 것이라면 나는 모른다.

Answer 2

사용이 코드와

 #closeZoomImgButton 
    { 
     background: url("../images/Close_X_Icon.png") no-repeat scroll 0 0 transparent !important; 
     cursor: pointer; 
     height: 30px; 
     left: 440px; 
     position: absolute; 
     top: -18px; 
     width: 30px; 
     z-index: 90003; 
     } 

위치, Z- 인덱스와 폭을 말해 나는 문제가 무엇인지 볼