javascript - 如何将 JQuery 效果限制为嵌套 block 中的一个元素

Question

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

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

我有一些 CSS:

#title{
    position:absolute;
    font-family:"Papyrus";
    color:purple;
    font-size:80px;
    left: 42%;
    margin-top:-.1%;
}

.image{
    position:absolute;
    margin-left:-120px;
    margin-top:35px;
}

我嵌套了这两个，以便在重新调整屏幕大小时图像与 h1 标签保持一致。

我想做的是同时运行两种不同的 JQuery 效果；但是，“.image”部分受到“#title”的影响。 Jquery 看起来像这样:

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

似乎发生的是图像类被拉入我不想要的粉扑效果。然后它会产生反弹效果，但它会远离其正常位置。我认为这可能是基于扩展的抽吸位置，但我不确定。无论如何，我希望粉扑效果仅作用于 #title 而不是 .image 部分。

谢谢。

Answer 1

您可以将图像移出标题并放入 div 中。您可能需要应用一些额外的样式，但这可能是您的最佳选择。

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