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>

Answer 2

不要嵌套它们。而是使用绝对定位使它们看起来重叠。

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

2 个答案: