Jquery字幕覆盖滚动时的阴影

jquery captions covering shadow on rollover

本文关键字：阴影 滚动 字幕 覆盖 Jquery      更新时间：2023-09-26

你好，我正在使用这个插件: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

感谢您的帮助

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

CSS 

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

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

第51行

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

硬编码的高度和宽度，以适应较大的图像尺寸，由于阴影。这意味着它只适用于这个图像。我猜我可以用原来的This。高度+ 10或其他，但不是所有的图像都有阴影。在任何情况下，我只在一个大小的图像上使用它，所以对于我的需要，现在已经足够好了。

第91行:

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

改为-90，这样就不会与阴影

重叠
相关文章：