Наведите курсор на якорь, чтобы отобразить изображения во втором div

как я могу навести теги с именем класса hovernaviitem и отобразить класс imagecontainer с 4 изображениями, которые принадлежат 4 тегам? Извините за мой плохой английский.

** РЕДАКТИРОВАТЬ: нужно ли скрывать класс imagecontainer при загрузке html? потому что я хочу отображать контейнер изображений только при наведении курсора на теги привязки.

**THE HTML** 

<div class="list-group">
<a href="#" class="list-group-item active hovernaviitem">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">lorem fhaowidnioanduoabnuid baui</p>
</a>
<a href="#" class="list-group-item hovernaviitem">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">lorem fhaowidnioanduoabnuid baui</p>
</a>    
<a href="#" class="list-group-item hovernaviitem">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">lorem fhaowidnioanduoabnuid baui</p>
</a>
<a href="#" class="list-group-item hovernaviitem">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">lorem fhaowidnioanduoabnuid baui</p>
</a>    
</div>
</div>
<div class="row">
<div class="col col-md-6">
<div class="imagecontainer">
<img src="img/galerie/1video.png" class="img-responsive hoverimg" alt="Responsive      image">
<img src="img/galerie/1video1.png" class="img-responsive hoverimg" alt="Responsive image">
<img src="img/galerie/1video2.png" class="img-responsive hoverimg" alt="Responsive image2">
</div>


</div>
</div> <!-- row -->

JS

$('.hoverimg').onClick(function(){
$('.imagecontainer').show();

});

javascript html jquery css jquery-hover
person user2957981    schedule 12.11.2013    source источник
comment
Где теги в вопросе?   -  person David says reinstate Monica    schedule 12.11.2013

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать событие hover

$( ".hovernaviitem" ).hover(
  function() {
    $('.imagecontainer').show();
  }, function() {
    $('.imagecontainer').hide();
  }
);
person Satpal    schedule 12.11.2013

arrow_upward
0
arrow_downward

Вы должны использовать наведение:

$( "hoverimg" ).hover(
  function() {
    $('.imagecontainer').show();
  }, function() {
    $('.imagecontainer').hide();
  }
);

См.: http://api.jquery.com/hover/.

В вашем случае (я полагаю, вы хотите переключаться между изображениями, а не показывать их все сразу), вам понадобится способ узнать, какая ссылка запускает какое изображение, что вы можете сделать, добавив классы:

  <div class="imagecontainer">
  <img src="img/galerie/1video.png" class="img-responsive hoverimg hoverimg1" alt="Responsive image">
  <img src="img/galerie/1video1.png" class="img-responsive hoverimg hoverimg2" alt="Responsive image">
  <img src="img/galerie/1video2.png" class="img-responsive hoverimg hoverimg3" alt="Responsive image">
  </div>


<div class="list-group">
<a href="#" class="list-group-item active hovernaviitem1">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">lorem fhaowidnioanduoabnuid baui</p>
</a>
<a href="#" class="list-group-item hovernaviitem2">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">lorem fhaowidnioanduoabnuid baui</p>
</a>    
<a href="#" class="list-group-item hovernaviitem3">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">lorem fhaowidnioanduoabnuid baui</p>
</a>
<a href="#" class="list-group-item hovernaviitem4">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">lorem fhaowidnioanduoabnuid baui</p>
</a>    
</div>

.

$( "hovernaviitem1" ).hover(
  function() {
    $('.imagecontainer1').show();
  }, function() {
    $('.imagecontainer1').hide();
  }
);
//...

Или вы можете просто сохранить их в определенном порядке и использовать

$(function(){
    $( ".hover-img-link" ).hover(
      function() {
        var index =  $(this).index();
         $('.imgs img').eq(index-1).show();
      }, function() {
        var index =  $(this).index();
         $('.imgs img').eq(index-1).hide();
      }
    );
});

http://plnkr.co/edit/q1UY6XAwUcLRpAFECG2i

person hugo der hungrige    schedule 12.11.2013
comment
Чего я не понимаю, так это того, как установить контейнер изображения в html при загрузке документа. документ показывает все 4 изображения, а не только 1 при наведении. @ Hugo, evtl kannst du mir das auch auf Deutsch erklären, wäre für mich warscheinlich einfacher :) - person user2957981; 13.11.2013
comment
Это было бы дурным тоном, так как большинство людей здесь нас не поняли бы ;). Я бы порекомендовал вам использовать последний фрагмент, который я опубликовал (проверьте ссылку на plunker, чтобы увидеть, как это работает). - person hugo der hungrige; 13.11.2013
comment
да это работает мужики!!! Спасибо :). у меня была скобка с одним пробелом в моем файле js ..... мне потребовался час, чтобы найти этого чертенка :) последний вопрос, можете ли вы сказать мне, что означает eq.(index-1)? - person user2957981; 13.11.2013
comment
Когда у вас есть jquery-селектор, часто бывает более 1 совпадения. eq позволяет выбрать конкретное совпадение, начиная с 0. См.: api.jquery.com/eq. индекс, с другой стороны, начинается с 1. Вот почему -1 есть. Если ответ действительно сработал для вас, было бы неплохо, если бы вы могли пометить его как принятый ответ, чтобы другие знали, что на него уже был дан ответ. - person hugo der hungrige; 13.11.2013