Question

如何将a标签悬停在带有classname hovernaviitem的标签上，并显示带有4个属于4个标签的图像的类imagecontainer？对不起我的坏英语。

* * 编辑：当html加载时，我是否必须隐藏类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 -->

THE JS

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

});

Answer 1

你应该使用悬停：

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

Answer 2

您可以使用hover事件

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

将鼠标悬停在锚点上以在第二个div中显示图像

2 个答案: