1

我在一个容器中有一些工作缩略图 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
}
4

2 回答 2

1

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

制作z-index:1一个更高的索引以满足您的需求，并包括一个height和width。

于 2013-11-01T00:15:33.357 回答
0

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

在这里您可以看到它的实际效果：http: //jsfiddle.net/P8xEN/

于 2013-11-01T00:16:53.417 回答