javascript - jquery 字幕在翻转时覆盖阴影

Question

您好，我正在使用这个插件:http://www.wbotelhos.com/capty/

我遇到的问题是，我放置它的图像已经通过一些简单的 css 在滚动时产生了阴影:

a:hover img.imagedropshadow {
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}

a:active img.imagedropshadow {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
        box-shadow: none;
}

添加 jquery 标题后，我弹出了标题，但图像不再有滚动的阴影，因为我相信图像并没有真正被滚动，因为 jquery 在图像周围创建了 div。

图片html是这样的:

<a href="blah.html ">
<img class="default imagedropshadow" border="0" width="290" height="400" title=" test" alt=test2" src="images/1797sbgx.jpg">
</a>

标题css是:

div.capty-caption {
    background-color: #ccc;
    color: 000;
    font: bold 11px verdana;
    padding-left: 10px;
    padding-top: 7px;
      font-family: 'Quicksand', sans-serif;
  text-transform:uppercase;
  font-size: 87%;
  font-weight: 700;
}


div.capty-caption a {
    color: #318DAD;
    font: bold 11px verdana;
    text-decoration: none;
    text-shadow: none;
}

capty 插件的 javascript 是:http://pastebin.com/xc1h1Mna

感谢任何帮助

Answer 1

更改图像的 z-index。该图像现在将始终位于标题的顶部。

CSS

.default.imagedropshadow {
     z-index: 1000;
}