1

コンテナー内にいくつかの作業用サムネイル div があります。特定の div にカーソルを合わせると、次の行に沿ってその後の 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に合わせてより高いインデックスを作成し、 and も含めheightますwidth。

于 2013-11-01T00:15:33.357 に答える
0

マイナスを追加することにより、ホバー時にdivのサイズを変更していますmargin-bottom。これにより、左から開始するのではなく、ホバー時にフローティング div が「フック」されます。

ここで実際の動作を確認できます: http://jsfiddle.net/P8xEN/

于 2013-11-01T00:16:53.417 に答える