Наведите указатель мыши на один div и измените другой

Я полностью потерялся здесь и нуждаюсь в безумной помощи.Наведите указатель мыши на один div и измените другой

Если вы нажмете здесь http://cdechmedia.com/WIP/ Вы увидите три карты в одной форме: wow, LoL и wildstar.

Как вы можете видеть на фоне, что это пустая земля.

То, что я пытаюсь сделать, - это всякий раз, когда я наводил верх над словом wow, пустая земля превратится в другое изображение.

Я нахожусь в недоумении, как это сделать. Честно говоря, мне все равно, просто ли это с помощью 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, но по какой-то причине он не работает для меня, и я действительно в недоумении.

источник

2014-01-26 user3238054

Если вы измените ваш <div class="WoWCard"></div> добавить onmousemove и onmouseleave как <div class="WoWCard" onmousemove='setBackgroundWOW()' onmouseleave='setBackgroundDefault()'></div>, и дайте свой DIV <div class="GMSpash"> идентификатор, как <div class="GMSpash" id='gmspash'> то это должно быть легко установить фон с простым яваскриптом функцией:

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

Удачи!

источник

2014-01-26 18:11:48

Это сработало отлично, последний вопрос: как мне заставить его постепенно исчезать, а потом я золотой. спасибо, много человек. – user3238054

Если вы добавите следующий код в класс «GMSpash»: '-webkit-transition: background-image 0.2s ease-in-out; -moz-transition: background-image 0.2s ease-in-out; -ms-transition: background-image 0.2s ease-in-out; -o-переход: фоновое изображение 0.2s ease-in-out; переход: background-image 0.2s ease-in-out; ' тогда затухание должно работать отлично. Не забудьте принять ответ! –

Хм, что, похоже, не работает, все еще не исчезает никаких других идей. Http: //cdechmedia.com/WIP/ – user3238054

Похоже, вы хотите что-то вроде этого.

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

источник

2014-01-26 18:07:18

Просто установить "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.

источник

2014-01-26 18:13:00

Наведите указатель мыши на один div и измените другой

ответ

Смежные вопросы