Question

首先，感谢您阅读我的问题。当用户将鼠标悬停在其上时，我正在尝试制作3个图像的网格。我在很多网站上都看过这个，但我不知道这个效果/插件的名称是什么。所以我制作了一个图像，并且是我想要完成的事情的小提琴。

开始：

水平放置3张图像。除了右侧的一些first image条之外，tab-like几乎完全可见。当您将鼠标悬停在second image上时，它会向左滑动，只留下右侧的一个小（再次）tab-like栏。 third image也是如此。看到我拍的这张照片。

如果用户没有悬停任何图片，则只会返回默认显示first image以及second和third image状态tab-like的状态。

我还制作了一个小提琴here来显示图像的动画方式。

但是你可以看到这并不完美。这里有没有人有我可以使用的片段，因为我的jQuery技能还没有。但是我觉得这个（应该）可以更容易实现，而且我认为代码更少？甚至可能更优雅。

感谢（长）阅读......

Answer 1

这是一个简单的例子;]

＆＃13;

$('li').hover(function() {
  $(this).addClass('active');
}, function(){
  $(this).removeClass('active');
})

＆＃13;

li {
 width: 0;
 padding: 15px;
 float: right;
 height: 300px;
 overflow: hidden;
 cursor: pointer;
 color: #fff;
}

li:nth-child(1) {
  background: red;
}
li:nth-child(2) {
  background: green;
}
li:nth-child(3) {
  background: blue;
}

li.active {
  width: 400px;
  transition: all 1s;
}



ul {
  list-style: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>

＆＃13;

Answer 2

尝试使用zAccordian jquery插件。 https://natearmagost.github.io/zaccordion/index.html

Answer 3

所以我改变了你的例子：

我做的是：将位置更改为相对位置并将隐藏的溢出设置为 .wrapper

$(document).ready(function(){
    $(".img-1").hover(function(){
        $('.img-2').stop().animate({'left': '160px'}, 500);
        $('.img-3').stop().animate({'left': '180px'}, 500);
    }, function(){
        $('.img-2').stop().animate({'left': '160px'}, 500);
        $('.img-3').stop().animate({'left': '180px'}, 500);
    });
    $(".img-2").hover(function(){
        $('.img-2').stop().animate({'left': '20px'}, 500);
    }, function(){
    		$('.img-2').stop().animate({'left': '160px'}, 500);
    });
    $(".img-3").hover(function(){
        $('.img-2').stop().animate({'left': '20px'}, 500);
        $('.img-3').stop().animate({'left': '40px'}, 500);
    }, function(){
    		$('.img-3').stop().animate({'left': '180px'}, 500);
        $('.img-2').stop().animate({'left': '160px'}, 500);
    });
});

.img-1 {position:relative;top:0px; background-color:red; width: 200px; Height: 50px;}
.img-2 {position:relative;top:-50px;left:160px; background-color: #1F6; width: 200px; Height: 50px;}
.img-3 {position:relative;top:-100px;left:180px; background-color: #0FF; width: 200px; Height: 50px;}
.wrapper {
    border: black 1px solid;
    width: 200px;
    Height: 50px;
    position:relative;
    overflow: hidden;
    top:0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="img-1">
  </div>
  <div class="img-2">
  </div>
  <div class="img-3">
  </div>
</div>

Answer 4

你可以用CSS完全做到这一点，不需要javascript。

以下示例在div悬停时操纵z-index。唯一棘手的是'image-3'的悬停。 'image-2'的z-index也需要更改以确保它位于'image-1'之上。

因此，在HTML中，'image-2'位于'image-3'之后。比在CSS中'image-2'可以作为兄弟姐妹来解决。

[class^="img"] {
  position: absolute;
  top: 0;
  left: 0;
}

.img-1 {
  z-index: 3;
}

.img-1 img {
  border: 6px solid #FF0;
}

.img-2 {
  left: 20px;
  z-index: 2;
}

.img-2 img {
  border: 6px solid #F00;
}

.img-3 {
  left: 40px;
  z-index: 1;
}

.img-3 img {
  border: 6px solid #F60;
}

div[class^="img"]:hover {
  z-index: 5;
}

.img-3:hover+.img-2 {
  z-index: 4;
}

<div class="wrapper">
  <div class="img-1">
    <img src="//placehold.it/200x50&text='image-1'" alt="">
  </div>
  <div class="img-3">
    <img src="//placehold.it/200x50&text='image-3'" alt="">
  </div>
  <div class="img-2">
    <img src="//placehold.it/200x50&text='image-2'" alt="">
  </div>
</div>

悬停幻灯片图像左（jQuery），如果没有悬停则返回

4 个答案: