1

我连续三个图像。它们在鼠标悬停时放大。问题在于，当它们扩大时，它们会交叉到周围的元素中。我的jsfiddle在这里。红色边框代表整个容器，黑色边框代表单个图像容器。所以我想做的是在鼠标悬停时放大每个图像，但放大不应超出黑色边框。我已经为此搜索了解决方案，并且我发现那些说要使用溢出：隐藏的解决方案，但这似乎没有什么不同。有人请指出错误吗？

    .container {height:40px;border:1px solid red}
    .nav {margin:0; padding-top:5px;overflow:hidden}
    .nav-items {border:1px solid black}
    #set2 {margin-left:0px; display:inline-block}
    #set2:hover {  
      -webkit-animation: enlarge 5s;
      animation: enlarge 2s 1 forwards;
    }
    @-webkit-keyframes enlarge {
      100% {
        -webkit-transform: scale(1.5);
        transform: scale(2.1);
      }
    }


    <div class="banner_set"> 
     <div class="container"> 
      <ul class="nav">
        <li id="set2" class="nav-items"><a href="example.com"><img src="example1.jpg"></a></li>
        <li id="set2" class="nav-items"><a href="example.com"><img src="example2.jpg"></a></li>
        <li id="set2" class="nav-items"><a href="example.com"><img src="example3.jpg"></a></li>
       </ul>
       </div>
    </div>
4

1 回答 1

1

首先，您正在使用重复的 ID（您不应该这样做）。

其次，您正在缩放容器，而不是图像。更新您的样式，以便：

.nav-items {margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {  
  -webkit-animation: enlarge 5s;
  animation: enlarge 2s 1 forwards;
}

这样，您的容器保持相同大小，隐藏溢出，但您的图像在悬停时缩放。

这是一个更新的小提琴

于 2017-09-04T02:06:52.950 回答