Javascript 将触发器中的href作为另一个元素的背景img

我绝对不是jquery忍者，我是stackoverflow的新手，请善待我^-^

我想要一个背景图像变化的div。第一个后台img由jquery生成。它获取第一个

ulli a

的href并将其放在后台。到目前为止，这一切都很顺利

现在棘手的部分是：我想根据触发器的href更改这个背景img。这意味着，如果我将鼠标滑过列表中的第二个

ul li a

，它应该加载“trigger-url-2”作为div#gallery的背景img…等等

以下是我的简化代码：

<ul>
    <li><a href="trigger-url-1">Name</a></li>
    <li><a href="trigger-url-2">Name</a></li>
    <li><a href="trigger-url-3">Name</a></li>
</ul>
<div id="gallery">Content</div>

我尝试了很多版本，但每次它只加载我的div#gallery中的第一个触发器href。我还尝试了另一个$var，但没有任何结果。这里有一个例子：

$('ul li a').each(function(i, v) {
    $("ul li a").mouseover(function() {
    $("#gallery").css('background', 'url(("ul li a").attr("src")) no-repeat left top');
})

有人能帮我吗？对wordpress图库的要求既奇怪又棘手，这就是为什么它必须是动态的

谢谢你

试试这个：

$('ul li a').mouseover(function() {
    $("#gallery").css('background', 'url(' + this.href + ') no-repeat left top');
});

演示：你就快到了

$("ul li a").on("mouseover", function () {
    $("#gallery").css("background", "url(" + $(this).prop("href") + ") no-repeat left top");
});

我想应该对你有用。通过“on”绑定将其应用于选择器中的每个元素

$("ul li a").on("mouseover", function () {
    $("#gallery").css("background", "url(" + $(this).prop("href") + ") no-repeat left top");
});