1

クラス名hovernaviitemのタグをホバーして、4つのタグに属する4つの画像を含むクラスimagecontainerを表示するにはどうすればよいですか?私の下手な英語で申し訳ありません.

* *編集: HTML のロード時にクラス imagecontainer を非表示にする必要がありますか? アンカータグの上にカーソルを置いたときにのみimagecontainerを表示したいからです。

**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();

});
4

2 に答える 2

0

ホバーを使用する必要があります：

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

于 2013-11-12T19:45:42.570 に答える