Question

我在点击图片后打开了div以在图片上显示缩放版本。它使用jquery show(), and 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; }

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

任何建议plz。

Answer 1

我知道问题是什么，你没有将id添加到关闭的范围。

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

我改变了这个：

<span>close</span>

对此：

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

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

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-index和宽度很重要

css样式问题与标题关闭按钮

2 个答案: