Question

我连续三张图片。它们在鼠标悬停时放大。问题是，当它们扩大时，它们会交叉进入周围的元素。我的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>

Answer 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;
}

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

这是更新后的fiddle

放大时包含图像

1 个答案: