Hover over one div and change another

Question

I am completely lost here and need some mad help.

If you click here http://cdechmedia.com/WIP/ You will see three cards one form wow,LoL and wildstar.

As you can see by the background that it is an empty land.

What I am trying to do is whenever I hover over say the wow card the empty land will turn into another image.

I am at a loss of how to do this. Honestly I don't care if it's just with CSS , Javascript, or whatever as long and I can make it happen.

Here is the CSS for the cards an background:

<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>

And here is the 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;
}

Now as you can see there is a class that says .LoLSplash so when I hover over the league card it will turn the GMSpash to LoLSplash .

I have tried the #a:hover + #b and #a:hover ~ #b but for some reason it isn't working for me and I'm truly at a loss.

Answer 1

Looks like you want something like this.

$(".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");
    }
});

Answer 2

If you change your <div class="WoWCard"></div> to add an onmousemove and an onmouseleave like <div class="WoWCard" onmousemove='setBackgroundWOW()' onmouseleave='setBackgroundDefault()'></div> , and give your div <div class="GMSpash"> an id like <div class="GMSpash" id='gmspash'> then it should be easy to set the background with a simple javascript function:

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

Good luck!

Answer 3

Just set an "onmouseover" and "onmouseout" for the specific card like this:

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

and in JS:

    function changeLoLBackground() {
       document.getElementById("LoLCard").style.backgroundImage = 'url(URLofYourNewImage)';
    }
    function resetLoLBackground() {
       document.getElementById("LoLCard").style.backgroundImage = 'url(URLofYourOrgImage)';
    }

If you meant the background image of the website replace

document.getElementById("LoLCard")

with the id of your background div.