Javascript：悬停时如何影响其他元素？

好的，我希望有以下内容：当我悬停一个元素时，另一个元素应该被设置动画。但到目前为止，这一切都无济于事。我对javascript/jquery相当陌生，所以请不要太苛刻：p

javascript/jquery：

$("block").hover(function(){ 
    $(this).find("site").stop(true, false).fadeTo("slow", 0.2);

    $(this).find("textOnImage").stop(true, false).animate({ 
        opacity: "1"
    }, "slow");

    var id = jQuery(this).attr("id");
    if (id == "site1") {
        $("siteLarge").animate({
            backgroundImage: "images/site1large.png"
        }, "slow"); 
    } else if (id == "site2") {
        $("siteLarge").animate({
            backgroundImage: "images/site2large.png"
        }, "slow");
    } else if (id == "site3") { 
        $("siteLarge").stop(true, false).animate({
            backgroundImage: "images/site1large.png"
        }, "slow");
    }
}, function() {         
    $(this).find("site").stop(true, false).fadeTo("slow", 1);
    $(this).find("textOnImage").stop(true, false).animate({ 
        opacity: "0"
    }, "slow");
});

我已经用警报对它进行了测试，源代码识别工作正常。但是，“siteLarge”不受此影响

html：

<div id="centerBlock">
        <block id="site1">
            <site style="position: absolute; margin-left: 10px; margin-top: 10px; border: 1px solid black;">
                <img src="./images/site1.png" alt="some_text"/>
            </site>
            <textOnImage style="position: absolute; margin-left: 10px; margin-top: 10px;">
                Mijn eerste site. Best wel leeg, maar een leuk begin. Een combinatie van html en css.
            </textOnImage>
        </block>

        <block id="site2">
            <site style="position: absolute; margin-left: 10px; margin-top: 163px; border: 1px solid white;">
                <img src="./images/site2.png" alt="some_text"/>
            </site>
            <textOnImage style="position: absolute; margin-left: 10px; margin-top: 163px;">
                Mijn tweede site. Een hele grote vooruitgang ten opzichte van mijn eerste site! Hier wordt interactieve css toegepast.
            </textOnImage>
        </block>

        <block id="site3">
            <site style="position: absolute; margin-left: 10px; margin-top: 316px; border: 1px solid black;">
                <img src="./images/site3.png" alt="some_text"/>
            </site>
            <textOnImage style="position: absolute; margin-left: 10px; margin-top: 316px;">
                Toekomstige plannen: <br> php, msql, ajax.
            </textOnImage>
        </block>

        <large>
            <siteLarge style="position: absolute; margin-left: 250px; margin-top: 10px;">
            </siteLarge>
        </large>

    </div>

Mijn eerste遗址。最好的朋友，开始吧。即使是组合式的html和css。
Mijn tweede网站。即使是在一个很好的地方！Hier wordt Interactiveve css toegepast。
Toekomstige plannen:
php、msql、ajax。

如果您正在寻找从一个背景图像到另一个背景图像的淡入淡出过渡，则不能使用

.animate（）

。有关渐变过渡解决方案，请参见

---

另外，您可能需要对新url进行正确的CSS声明：

backgroundImage:“url（images/site1large.png）”

。但是，

.animate（）

如果可以工作，可能会立即切换到新图像。

控制台中有错误吗？在你的一个动画行上看起来像一个奇怪的“\”。那些选择器是怎么回事？你有像

和

这样的标签吗？@Jivings是的，我已经修复了，这些都是复制粘贴错误。这些对问题来说并不重要。你能为“背景图像”设置动画吗？你说的“不受影响”是什么意思？我不认为你可以像这样设置背景图像的动画（甚至不清楚设置动画意味着什么；设置不透明度？位置？有几个选项…）。您刚刚发布的HTML不是HTML。它可以是XML，但您没有澄清这一点。。。请发布一个JSFIDLE或一个实时URL，这样我们就可以看到您试图实现的目标。