html - 标题关闭按钮的CSS样式问题

Question

我有以下 div 打开点击图像显示缩放版本的图像。 它通过使用 jquery show() 和 hide() 来完成它应该做的事情 但我不知道如何设计它，我正在使用以下代码:

<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; }

所以我可以单击并关闭缩放的图像，但现在整个标题都可以单击我只希望关闭按钮可以单击并且应该具有焦点和悬停效果才能知道它是可以单击的。

有什么建议吗。

Answer 1

我知道问题出在哪里了，您没有将 id 添加到用于关闭的 span 中。

请在此处查看更新的 fiddle http://jsfiddle.net/WFyMu/5/

我改变了这个:

<span>close</span>

对此:

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

现在，当您单击关闭跨度时，它将隐藏。但不知道这是不是你想要的？