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

Javascript: how to affect other element when hovering?

本文关键字:影响 其他 元素 何影响 悬停 Javascript      更新时间:2023-09-26

好的,所以我想要以下内容:当我悬停一个元素时,应该为另一个元素设置动画。但到目前为止,这一切都无济于事。我是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>

如果您正在寻找从一个背景图像到另一个背景图片的渐变,则无法使用.animate()。是否看到悬停时转换背景图像/css的更改?用于渐变过渡解决方案。

此外,您可能需要一个新url的正确CSS声明:backgroundImage: "url(images/site1large.png)"。但是,如果.animate()工作的话,它可能会立即切换到新图像。