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>

Answer 2

使用CSS选择器更快更好易

<style>
    .content-box-title img{
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
    }
    .content-box-title:hover img{
        -webkit-filter: drop-shadow(2px 2px 2px #00f);
    }
</style>

如何在另一个div

2 个答案: