原始 HTML:
<div class="content-box-blue content-box">
<img src="text.png" style="z-index: 5; display: inline-block; overflow: hidden; position: absolute; top: 0; right: 0;" alt="">
<div class="title content-box-title">
<div style="display: inline-block; width: 30px; height: 30px; vertical-align: middle; overflow: hidden; padding: 0 10px 0 0;">
<img src="theImage.png" style="z-index: 5; display: inline-block; overflow: hidden;" class="tileSprite animImage" alt="">
</div>Annett
</div>
<div class="content"></div>
</div>
脚本:
$("div.content-box").hover(function () {
$(this).children("div:first-child").children("div").find("img").animate($(this).css("-webkit-filter", "drop-shadow(2px 2px 2px #00f)"), 500);
console.log($(this).children("div:first-child").children("div").find("img").length);
}, function () {
});
悬停脚本执行后:
<div class="content-box-blue content-box" style="-webkit-filter: drop-shadow(rgb(0, 0, 255) 2px 2px 2px);">
<img src="text.png" style="z-index: 5; display: inline-block; overflow: hidden; position: absolute; top: 0; right: 0;" alt="">
<div class="title content-box-title">
<div style="display: inline-block; width: 30px; height: 30px; vertical-align: middle; overflow: hidden; padding: 0 10px 0 0;">
<img src="theImage.png" style="z-index: 5; display: inline-block; overflow: hidden;" class="tileSprite animImage" alt="">
</div>Annett
</div>
<div class="content"></div>
</div>
如何修改脚本,使阴影位于图像上而不是 div 中。
最佳答案
您的选择器有误。您使用了 div
的选择器。
我改成了这样:
$(this).find(".animImage").css("-webkit-filter", "drop-shadow(2px 2px 2px #00f)")
演示
$("div.content-box").hover(function() {
$(this).children("div:first-child").children("div").find("img").animate($(this).find(".animImage").css("-webkit-filter", "drop-shadow(2px 2px 2px #00f)"), 500);
}, function() {});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-box-blue content-box">
<div class="title content-box-title">
<div style="display: inline-block; width: 30px; height: 60px; vertical-align: middle; overflow: hidden; padding: 0 10px 0 0;">
<img src="theImage.png" style="z-index: 5; display: inline-block; overflow: hidden;" class="tileSprite animImage" alt="">
<img src="theImage.png" style="z-index: 5; display: inline-block; overflow: hidden;" class="tileSprite" alt="">
</div>Annett
</div>
<div class="content"></div>
</div>
关于javascript - 如何在另一个div中的div中的图像上放置阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35920303/