Javascript 将鼠标悬停在一个div上，然后更改另一个div

我在这里完全迷路了，需要一些疯狂的帮助

如果你点击这里 你会看到三张卡片，一张是wow、LoL和wildstar

从背景可以看出，这是一片空旷的土地

我想做的是，每当我在魔兽世界卡片上悬停时，空旷的土地就会变成另一幅图像

我不知道该怎么做。老实说，我不在乎它是否只是与CSS，Javascript，或任何只要我能做到这一点

以下是背景卡的CSS：

<div class="GMSpash">
 <div class="CardsWrapper">
  <a href="#">
  <div class="WoWCard"></div></a>
  <a href="#"><div class="LoLCard"></div></a>
  <a href="#"><div class="WSCard"></div></a>
 </div>
</div>

现在你可以看到，有一个类写着

.LoLSplash

，所以当我把鼠标悬停在联赛卡上时，它会把

GMSpash

变成

LoLSplash

---

我试过

#a:hover+#b

和

#a:hover~#b

，但出于某种原因，它对我不起作用，我真的很茫然。

看起来你想要这样的东西

$(".CardsWrapper > a").mouseover(function() {
    var $this = $(this);
    if ($this.children.hassClass("WoWCard")) {
        $(".CardsWrapper").parent().removeClass().addClass("WoWSplash");
    }
    else if ($this.children.hassClass("LoLCard")) {
        $(".CardsWrapper").parent().removeClass().addClass("LoLSplash");
    }
    else if ($this.children.hassClass("WSCard")) {
        $(".CardsWrapper").parent().removeClass().addClass("WSSplash");
    }
});

如果您将

更改为添加

onmousemove

和

onmouseleave

类似

，并为div

提供一个类似

的id，则应该可以使用简单的javascript函数轻松设置背景：

<script>
function setBackgroundWOW(){
    document.getElementById("gmspash").style.backgroundImage = "url('wow_image_url')";
}
function setBackgroundDefault(){
    document.getElementById("gmspash").style.backgroundImage = "url('images/GMSplashBG.jpg')";
}
</script>

函数setbackgroundow（）{
document.getElementById（“gmspash”）.style.backgroundImage=“url（'wow_image_url'）”；
}
函数setBackgroundDefault（）{
document.getElementById（“gmspash”）.style.backgroundImage=“url（'images/GMSplashBG.jpg'）”；
}

祝你好运

只需为特定卡设置“onmouseover”和“onmouseout”，如下所示：

<div id="LoLCard" class="LoLCard" onmouseover="changeLoLBackground()" onmouseout="resetLoLBackground()"></div>

如果你是指网站的背景图片，请替换

document.getElementById("LoLCard")

---

最后一个问题是，我该如何使它很好地淡入淡出，然后我就变成了金色。非常感谢你。如果你在“GMSpash”类中添加以下代码：

-webkit转换：背景图像0.2s轻松输入输出-moz过渡：背景图像0.2s缓进缓出-ms转换：背景图像0.2s缓进缓出-o过渡：背景图像0.2s缓进缓出；过渡：背景图像0.2s缓进缓出然后淡入应该可以完美地工作。别忘了接受答案！嗯，这似乎不起作用，但仍然没有放弃任何其他想法。你用的是什么浏览器？我刚刚看了一眼，问题似乎是因为您使用的图像非常大，需要一段时间才能加载。解决这个问题的方法不多，除了使用另一种过渡方式，比如幻灯片。如果你想使用幻灯片，那么很容易实现平滑的跨浏览器实现。不，我希望它淡入淡出，并在firefox中即时通信。也就是说，当我使用淡入淡出的颜色为图像创建链接时，它工作得很好，所以我想知道问题出在哪里。。。。。
    function changeLoLBackground() {
       document.getElementById("LoLCard").style.backgroundImage = 'url(URLofYourNewImage)';
    }
    function resetLoLBackground() {
       document.getElementById("LoLCard").style.backgroundImage = 'url(URLofYourOrgImage)';
    }

document.getElementById("LoLCard")