Question

所以我创建了一个浮动左侧的图像库，一切都运行良好但是当我到达第二行图像时，事情变得混乱。每当我将鼠标悬停在第一行的图像上时，第二行位置上的任何图像都会自动搞砸。

这是codepen。（我最近的艺术看起来比codepen更好，但只要你将鼠标悬停在图像上，你就会明白这个想法）尝试将鼠标悬停在任何图像上，看看第二行图像是如何搞砸的。 http://codepen.io/anon/pen/ZpGrVA

<html>
<body style="background-color: rgb(242, 242, 242);">
<style>

.middlegallery{

   top:250px;
   position: absolute;
 }
 .mainpanel{
    left: 50%;
    right:50%;
    display:block;
    padding: 15px;
    /*top: 125px;*/
    font-size: 16px;
    background-color: #f5f5f5;
    border: 1px solid #d8d8d8;
    line-height: 1.5;
    border-radius: 5px 3px 0 0;
   position: relative;
    font-family: Helvetica, Arial, sans-serif;
}

.gallery-image{
 margin:5px;
 border: 1px solid #ccc;
 zoom: 1;
 float:left;
 cursor:pointer;
 position:relative;
 }
img:hover{
    border:1px solid #777;
}
img{

}
.middlewrapper{
    margin:0 auto;
    width:95%;
    padding-top: 125px;
}



</style>
<div class="middlewrapper">
<div class="col-sm-6">
<div class="mainpanel"><h5 style="font-family: Verdana, serif; text-align: left; position: relative; top: 3px;"><i class="fa fa-picture-o" aria-hidden="true"></i> Recent arts</h5></div>
  </div>
  <div class="middlegallery">
  <div class="gallery-image">
 <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 </div>
 </div>

Answer 1

这里发生的事情是当悬停时添加边框时div会变大，并且会推动其他div。只需将边框添加到图像中即可。

img{
 border: 1px solid transparent;
}

Answer 2

因为在悬停时你添加一个边框，这意味着你的元素会变大2px，第二行会根据最长元素自行定位。为此目的使用阴影

img:hover{
    box-shadow: 0 0 0 1px #777;
}

Answer 3

为transparent使用img边框并解决问题 - hover边框导致问题

    img:hover{
        border:1px solid #777;
    }
    img{
      border: 1px solid transparent;
    }

建议 - 将display: block或vertical-align: top添加到img以删除图片下方内联元素的空白特征。

让我知道您对此的反馈。谢谢！

＆＃13;

* {
  box-sizing: border-box;
}
.middlegallery {
  top: 250px;
  position: absolute;
}
.mainpanel {
  left: 50%;
  right: 50%;
  display: block;
  padding: 15px;
  /*top: 125px;*/
  font-size: 16px;
  background-color: #f5f5f5;
  border: 1px solid #d8d8d8;
  line-height: 1.5;
  border-radius: 5px 3px 0 0;
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
}
.gallery-image {
  margin: 5px;
  border: 1px solid #ccc;
  zoom: 1;
  float: left;
  cursor: pointer;
  position: relative;
}
img:hover {
  border: 1px solid #777;
}
img {
  border: 1px solid transparent;
  display: block;
}
.middlewrapper {
  margin: 0 auto;
  width: 95%;
  padding-top: 125px;
}

＆＃13;

<html>

<body style="background-color: rgb(242, 242, 242);">
  <div class="middlewrapper">
    <div class="col-sm-6">
      <div class="mainpanel">
        <h5 style="font-family: Verdana, serif; text-align: left; position: relative; top: 3px;"><i class="fa fa-picture-o" aria-hidden="true"></i> Recent arts</h5>
      </div>
    </div>
    <div class="middlegallery">

      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
    </div>
  </div>

</body>

</html>

＆＃13;

图像在使用左侧浮动时悬停位置

3 个答案: