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

原始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 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（函数（）{
$（this）.children（“div:first child”）.children（“div”）.find（“img”）.animate（$（this.find（.animiimage”）.css（“-webkit filter”，“drop shadow（2px 2px 2px#00f）”），500）；
}，函数（）{}）

安妮特
使用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>


.内容框标题img{
-webkit转换：所有500毫秒的易入易出；
-moz转换：所有500毫秒的输入输出都很轻松；
-o型过渡：所有500ms的缓进缓出；
过渡：所有500ms的缓进缓出；
}
.内容框标题：悬停img{
-webkit过滤器：投影（2px 2px 2px#00f）；
}
我有另一张图片，但我只想要带有
animImage
类的图片？更新了我的问题。谢谢。您的选择器应该是
$（这个）。查找（“.animImage”）
。请参阅更新的答案。对于演示，我添加了第二个没有特定类的图像。只是在IE10中尝试了它，但它无法声明，
0x800a01b6-JavaScript运行时错误：对象不支持属性或方法“replace”
：（Chrome/FF很好用。我想知道我是否有一个适用于所有浏览器的带有框阴影的类，如果可以的话，我会为该类设置动画。Myabe你可以使用
box shadow
。不幸的是，它在IE9中不起作用，这是我必须瞄准的目标。
<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>