Question

我在容器中有一些工作缩略图div当我将鼠标悬停在一个特定的一个上时，它会将它移到下一行之后。我该如何解决这个问题？

HTML：

<div class="blog-container">
  <h1>PRINT</h1>
  <div class="work_thumbs">
    <li class="print">
      <div><a href="Work/Tree Top News/treetopnews.html"><img src="../Images/Tree Top News/Thumbs/TTN2.jpg" alt="Tree Top" border="0" class="thumb">TREE TOP NEWS</a></div>
    </li>
    <li class="print">
      <div><a href="Work/Harrow Council/harrowcouncil.html"><img src="../Images/Harrow Council/Thumbs/Harrow Logo.jpg" alt="Harrow Council" border="0" class="thumb">HARROW COUNCIL</a></div>
    </li>
    <li class="print">
      <div><a href="Work/Regent Care/regentcare.html"><img src="../Images/Regent/Thumbs/Regent logo.jpg" alt="Regent Care" border="0" class="thumb">REGENT CARE SERVICES</a></div>
    </li>
    <li class="print">
      <div><a href="Work/NLCS/nlcs.html"><img src="../Images/NLCS/Thumbs/NLCS logo.jpg" alt="NLCS" border="0" class="thumb">NLCS</a></div>
    </li>
     <li class="print">
       <div><a href="Work/Aish/aish.html"><img src="../Images/Aish/Thumbs/AHC.jpg" alt="Aish" border="0" class="thumb"> AISH</a></div>
    </li>
    <li class="print">
      <div><a href="Work/FJL/fjl.html"><img src="../Images/FJL/Thumbs/FJL.jpg" alt="chicago graphic design" border="0" class="thumb">FJL</a></div>
    </li>
    <li class="print">
      <div><a href="Work/Canons High/canonshigh.html"><img src="../Images/Tree Top News/Thumbs/TTN.png" alt="Canons high school" border="0" class="thumb">CANONS HIGH SCHOOL</a></div>
    </li>
  </div>
</div>

CSS：

.blog-container {
  height: 100%;
  width: 100%;
  margin-top: 37px;
  background-color:
}

.work_thumbs {
  width:1000px;
  margin: 0px auto 0 auto;
  float: left;
}

.work_thumbs li {
  margin: 0px 15px 15px 0px;
  list-style-type: none;
  display: block;
  float: left;
  display: inline;
  font-family: "geogtq md";
  color: #FFF;
  overflow: hidden;
}

.work_thumbs li a {
  float: inherit;
  display: block;
  width: 230px;
  padding-bottom: 50px;
  font-family: "geogtq md";
  color: #00BDE5;
  height: 200px;
  border: 1px solid #02BDE5;
  overflow: hidden;
}

.work_thumbs li .type {
  color: #01BDE6;
}

.work_thumbs li a:hover {
  background-color: #ceeef6;
  border-bottom: 1px solid #a2a2a2;
  text-decoration: none;
  margin-bottom: -1px;
  color: #007789;
  font-family: "geogtq md";
} 

.work_thumbs li .thumb {
  margin-bottom: 15px;
  display:block
}

Answer 1

element:hover{url('pathToImg.png'); position:relative; z-index:1;}

使z-index:1更高的索引符合您的需求，并且还包括height和width。

Answer 2

您在悬停时通过添加否定margin-bottom来更改div的尺寸。这会导致浮动div在悬停时“挂钩”，而不是从左侧开始。

您可以在此处看到它：http://jsfiddle.net/P8xEN/

当鼠标悬停在其他div上时，div会移动

2 个答案: