悬停在网格中的效果

Question

出于某种原因，当悬停在一个盒子上时，它的大小会稍微增加。它应该只在框内放大，而不是增加它的大小。

JSFiddle

＆＃13;

＆＃13;

SELECT VU.*, 
       COALESCE(UI.UserImg, 'dflt.jpg') as UserImg,
       COALESCE(CI.Interests, 0) as NumInterests 
FROM [vw_tmpUsers] VU LEFT JOIN
     (SELECT [tmpUserPhotos].UserID, MAX([tmpUserPhotos].uFileName) as UserImg 
      FROM [tmpUserPhotos] 
      GROUP BY UserID
     ) UI 
     ON VU.UserID = UI.UserID ;

＆＃13;

NULL

＆＃13;

＆＃13;

＆＃13;

Answer 1

您遇到的问题是由于您在#inner上的定位属性，这会在两侧留下1px的间隙。父母实际上比所有方面的内盒大1px，所以当你悬停时你看到一个小的增加。只有在覆盖了这个1px之后，overflow: hidden才会生效。

我已将background: red添加到父级（#outer），以便您可以看到父级如何大于子级。

＆＃13;

＆＃13;

#wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid #c5c5c5;
  box-sizing: border-box;
  background: #eee;
}

#outer {
  width: 20%;
  padding-bottom: 20%;
  color: #FFF;
  position: relative;
  float: left;
  overflow: hidden;
  display: inline-block;
  background: red;
}

#inner {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  background: #66F;
  padding: 10px;
  transition: all .3s ease;
}

#inner:hover {
  transform: scale(1.1);
  vertical-align: middle;
}

＆＃13;

<div id="wrapper">
	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>	<div id="outer">
   <div id="inner">
   test
   </div>
	</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

您可以在父级上使用透明边框，而不是使用定位属性在所有边上留下1px间隙。与原始片段一样，这样会在所有方面留下1px的间隙，但由于父母的边框与子节点之间没有剩余空间，因此缩放看起来不像孩子在父母之外生长。

＆＃13;

＆＃13;

#wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid #c5c5c5;
  box-sizing: border-box;
  background: #eee;
}
#outer {
  width: 20%;
  padding-bottom: 20%;
  color: #FFF;
  position: relative;
  float: left;
  overflow: hidden;
  display: inline-block;
  border: 1px solid transparent;
}
#inner {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #66F;
  padding: 10px;
  transition: all .3s ease;
}
#inner:hover {
  transform: scale(1.1);
  vertical-align: middle;
}

＆＃13;

<div id="wrapper">
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
  <div id="outer">
    <div id="inner">
      test
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

其他几点需要注意：

• 我没有给予这么多重要性，因为我认为它是一个复制粘贴演示，但同一id不应该用于多个元素。如果我们这样做，那么HTML就变得无效了（正如putvande在他的评论中指出的那样）。
• 正如torazaburo在评论中指出的那样，box-sizing和transition属性不再需要带前缀的版本（除非您必须支持非常旧的浏览器版本）。