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

Answer 2

好的，所以这就是我所做的修复它......但它破坏了可重用性：

第51行

    $wrapper.css({
        height:     '410',
        overflow: 'hidden',
        position:   'relative',
        width:      '295'
    });

硬编码的高度和宽度，以容纳因阴影而导致的较大图像尺寸。这意味着它只适用于此图像。我可以猜测使用原始的This.height + 10或者其他但不是所有的图像可能都有阴影..无论如何我只在1尺寸的图像上使用它，所以对于我的需要，这对于现在来说已经足够了..

第91行

：

$caption.animate({ top: (-90) }, { duration: options.speed, queue: false });

更改为-90，因此它不会与阴影重叠

覆盖阴影的jquery字幕

2 个答案: