1

我如何将带有类名 hovernaviitem 的标签悬停并显示类 imagecontainer 与属于 4 个标签的 4 个图像？对不起我的英语不好。

* *编辑：当 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 -->

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 回答
0

您可以使用悬停事件

$( ".hovernaviitem" ).hover(
  function() {
    $('.imagecontainer').show();
  }, function() {
    $('.imagecontainer').hide();
  }
);
于 2013-11-12T19:46:21.500 回答