Question

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

如果点击此处http://cdechmedia.com/WIP/ 你会看到三张牌哇，LoL和野星。

正如你所看到的那样，这是一块空地。

我想要做的是，每当我徘徊在说哇卡片时，空地就会变成另一张图像。

我不知道该怎么做。老实说，我不关心它是否仅仅使用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

看起来你想要这样的东西。

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

如果您更改<div class="WoWCard"></div>以添加onmousemove和onmouseleave，例如<div class="WoWCard" onmousemove='setBackgroundWOW()' onmouseleave='setBackgroundDefault()'></div>，则将您的div <div class="GMSpash">更改为<div class="GMSpash" id='gmspash'>然后用简单的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>

祝你好运！

Answer 3

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

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

和JS：

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

如果您的意思是网站的背景图片替换

document.getElementById("LoLCard")

使用你的背景div的id。

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

3 个答案: