javascript - 如何在另一个div中的div中的图像上放置阴影

Question

原始 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 中。

Answer 1

您的选择器有误。您使用了 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>