Javascript 如何将JQuery效果限制为嵌套块中的一个元素

我有一个H1标签，包含文本和图像。标记看起来像这样：

<h1 id="title">My Title
    <img class="image" src="/icons/image.png">
</h1>

$("#title").hover(function(){
    $("#title").effect("puff","slow",function(){
        $("#title").fadeIn()});
    $(".image").effect("bounce","slow");
});

我嵌套了这两个标签，以便在屏幕重新调整大小时，图像保留在h1标签上

我想做的是让两个不同的JQuery效果同时运行；然而，“.image”部分被“#title”的效果所吸引。Jquery如下所示：

<h1 id="title">My Title
    <img class="image" src="/icons/image.png">
</h1>

$("#title").hover(function(){
    $("#title").effect("puff","slow",function(){
        $("#title").fadeIn()});
    $(".image").effect("bounce","slow");
});

似乎发生了这样的事情：image类被拉入了我不想要的puff效果中。然后它会产生反弹效果，但它会在远离正常点的地方产生反弹效果。我想这可能是基于长喷位置，但我不确定。不管怎样，我希望烟团效果只作用于#标题，而不是.image部分

---

谢谢。

您可以将图像移动到标题外的div中。您可能需要应用一些其他样式，但这可能是您的最佳选择

<div>
    <h1 id="title">My Title</h1>
    <img class="image" src="/icons/image.png">
</div>

我的头衔

不要嵌套它们。相反，使用绝对定位使它们看起来是重叠的。

效果实际上只是更改某些CSS属性的javascript，您不能更改父元素的CSS并期望子元素不受影响，它会随父元素移动，因此，除非你找到一种不嵌套元素的方法，否则你想做的是不可能的。谢谢你的快速回复。我嵌套这些元素的唯一原因是，如果用户重新调整浏览器的大小，可以将它们保持在一起。有没有更好的方法来实现这一点而不嵌套它们呢？我确实使用了绝对定位，正如你从CSS中看到的那样，但是，如果重新调整窗口的大小，图像和文本就会分开。通过将它们嵌套在一起，我可以在重新调整尺寸时将它们保持在一起。我之前尝试过这种方法，但无法使其正常工作。然而，由于没有一个简单的JQuery解决方案，我在您的建议下又回到了JQuery，并且能够让它与其他CSS一起工作。基本上，我将div设为绝对值，并留有一定百分比的保证金。我把它里面的其他元素也变成了绝对元素，但是有px的边距。这允许在重新调整尺寸时进行一些流体设计，而无需将图像移动到我不想要的位置。当屏幕尺寸太小时，我使用媒体查询进行调整。再次感谢。