Показать/скрыть несколько элементов на парении с JQuery и HTML

Question

Это то, что я до сих пор:

<div style = "position: relative;"> 
<a href = "#games"> 
<div class="sidenavOff"> 
<img src = "images/card_normal.png" /> 
<img src = "images/category_icons/icon_games.png" style = "position: absolute; top: 10px; left: 40px;" /> 
<img src = "images/category_titles/title_games.png" style = "position: absolute; top: 160px; left: 40px;" /> 
</div> 
<div class = "sidenavOver"> 
<img src = "images/hover/card_hover.png" /> 
<img src = "images/category_titles/title_games.png" style = "position: absolute; top: 10px; left: 40px;" /> 
<img src = "images/hover/card_hover_separator.png" style = "position: absolute; top: 40px; left: 40px;" /> 
Show a bunch of text here 
<img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" /> 
/div> 
</a> 
</div> 

Так card.png является NoteCard, который имеет несколько прозрачных изображений наложенные поверх него. Когда мышь находится вдали от карты, на карте появляется сообщение «icon_games.png и title_games.png». Я хочу, чтобы, когда мышь нависает над card.png, icon_games.png или title_games.png (другими словами, всякий раз, когда указатель мыши находится на карте), на карте отображаются элементы title_games.png, card_hover_separator.png, текстовое описание и button_start_normal.png, в этом порядке по вертикали (и позиционирование этого должно быть доступно для редактирования, поскольку оно, вероятно, будет отличаться от изображений, отображаемых при не зависании).

Это мой JQuery код (я никогда не использовал его раньше, так что я уверен, что это от меня не совсем понимаю.):

$(document).ready(function() { 
$(“div.sidenavOff”).mouseover(function(){ 
$(this).removeClass().addClass(“sidenavOver”); 
}).mouseout(function(){ 
$(this).removeClass().addClass(“sidenavOff”); 
}); 
}); 

В более понятном формате, без парения:

http://img834.imageshack.us/img834/7026/screenshot20130606at122.png

С парении:

http://imageshack.us/photo/my-images/855/screenshot20130606at122.png/

Answer 1

Это мой код jquery [...]. Я не совсем понимаю, что

$(document).ready(function() {/* function body */}); 

Когда document (как объект JQuery $) является ready вызовите функцию , как описано /* function body */

$("div.sidenavOff") 

Использование JQuery $ получить все HTMLElements, которые соответствуют CSS-селектору div.sidenavOff

.mouseover(function() { 
    $(this).removeClass().addClass("sidenavOver"); 
}) 

Когда мышь проходит над одним из этих элементов (mouseover), удалите классundefined (как ни между кронштейнами, removeClass), затем добавить классsidenavOver (addClass) к элементу этой мыши (this). класс здесь можно понимать как то же, что и HTML атрибут класс; <a class="xyz">

.mouseout(function() { 
    $(this).removeClass().addClass("sidenavOff"); 
}) 

Когда мышь покидает один из этих элементов (mouseout), подобно тому, когда она идет за ними, за исключением этого времени добавления класса sidenavOff к этому элементу.

---

Вы близки, но, вероятно, хотите код, который выглядит следующим образом

$(document).ready(function() { 
    $("div.sidenavOff").mouseover(function() { // add visibility flag 
     $("div.sidenavOver").addClass("showme"); // to div.sidenavOver 
    }).mouseout(function() { // remove visibility flag 
     $("div.sidenavOver").removeClass("showme"); // from div.sidenavOver 
    }); 
}); 

Где класс showme относится к некоторым CSS, чтобы заставить элемент, который будет отображаться

.showme {display: block;} 

Answer 2

Это звучит например, вы просто пытаетесь показать или скрыть div «sidenavOver», когда мышь навешивает контейнер. Это верно?

Я создал этот jsfiddle с помощью html, но прокомментировал все ваши недостающие изображения и добавил класс в свой контейнер div. http://jsfiddle.net/joshvito/GaZQ6/

например.

//on hover over the container; you can use the a tag too, which ever element you want to bind the event to 
     $('.container').on({ 
     mouseenter: function() { 
      $(".sidenavOff").hide(); //On mouseover, hode the first div 
      $(".sidenavOver").show(); 
     }, 
     mouseleave: function() { 
      $(".sidenavOff").show(); 
      $(".sidenavOver").hide(); 
     } 
    }); 

хорошая ссылка для обработчиков событий JS находится в JQUERY API Documentation for .on