jQuery的字幕覆盖在侧翻阴影

你好我使用这个插件：http://www.wbotelhos.com/capty/jQuery的字幕覆盖在侧翻阴影

我遇到的问题是，像我把这个上已经有了一些简单的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

任何帮助表示赞赏

来源

2011-11-29 Sackling

更改图像的z-index。图像现在总是位于标题的顶部。

的CSS

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

来源

2011-11-29 14:29:15

更改z索引似乎不具有任何影响。 – Sackling

看起来它与溢出有关：隐藏在JavaScript中..如果我把它关闭翻转工作，但是标题然后不会隐藏在翻转之前。 – Sackling

我在小提琴上玩它，试图看看什么效果最好.. –

好了，所以这里是我做过什么来解决它。但它破坏的可重用性：

上线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所以它不重叠的影子

来源

2011-11-29 15:20:11 Sackling

jQuery的字幕覆盖在侧翻阴影

回答

相关问题