javascript - 将鼠标悬停在一个 div 上并更改另一个

Question

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

如果你点击这里http://cdechmedia.com/WIP/您会看到三张卡片，一张是 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>

这是 CSS:

.GMSpash {
    height: 656px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url(images/GMSplashBG.jpg);
}
.LoLSplash {
    height: 656px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url(images/WSSplashBG.jpg);
}
.CardsWrapper {
    height: 348px;
    width: 719px;
    margin-top: 450px;
    margin-right: 0px;
    margin-bottom: 0px;
    position: absolute;
    margin-left: -359.5px;
    left: 50%;
}
.WoWCard{
    background-image: url(images/WoWcard.png);
    background-repeat: no-repeat;
    float: left;
    height: 348px;
    width: 237px;
    margin-top: 5px;
    -webkit-transition:  all 0.4s;
    -moz-transition:  all 0.4s;
    -o-transition:  all 0.4s;
    -ms-transition:  all 0.4s;
    transition:  all 0.4s;
}
.WoWCard:hover {
    background-image: url(images/WoWcardH.png);
    margin-top: 0px;
}
.LoLCard {
    background-image: url(images/LoLcard.png);
    background-repeat: no-repeat;
    float: left;
    height: 348px;
    width: 237px;
    margin-top: 5px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}
.LoLCard:hover {
    background-image: url(images/LoLcardH.png);
    margin-top: 0px;
}
.WSCard {
    background-image: url(images/WScard.png);
    background-repeat: no-repeat;
    float: left;
    height: 348px;
    width: 237px;
    margin-top: 5px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}
.WSCard:hover {
    background-image: url(images/WScardH.png);
    margin-top: 0px;
}

现在如您所见，有一个名为 .LoLSplash 的类，所以当我将鼠标悬停在联盟卡片上时，它会将 GMSpash 变为 LoLSplash.

我已经尝试过 #a:hover + #b 和 #a:hover ~ #b 但由于某些原因它对我不起作用，我'我真的很茫然。

Answer 1

如果您更改 <div class="WoWCard"></div>添加 onmousemove和一个 onmouseleave喜欢<div class="WoWCard" onmousemove='setBackgroundWOW()' onmouseleave='setBackgroundDefault()'></div> , 并给你的 div <div class="GMSpash">像 <div class="GMSpash" id='gmspash'> 这样的 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>

祝你好运!