jquery - 将鼠标悬停在 div 上而不移动其他 div

Question

我有 12 个格:

<div class="worktop_central">
   <div class="row">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</div>

使用这个 CSS:

.worktop_central{
    position:relative; 
    margin-bottom: 30px;
}

.worktop_central .row{
  text-align: justify;
  font-size: 0;
  font-size: 12px\9; /* IE6-9 only hack */
}

.worktop_central .row div{
  border:1px solid #bfbfbf;
  display: inline-block;
  font-size: 12px;
  width: 216px;
  zoom: 1;
  *display: inline;
  min-height: 200px;
  margin-top:20px;
  transition: 1s ease-in-out;
}

.worktop_central .row div:hover{
    height: 600px;
}

.worktop_central .row:after{
  content: "";
  width: 100%;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

例如，在 div“1”的鼠标悬停时，我希望 div“5”和“9”只向下，而不是 5、6、7，...就像这个例子 http://jsfiddle.net/ARNcs/ .

有人知道我该怎么做吗？

Answer 1

我认为您需要在标记中添加列..以便能够正确地对这些 div 进行分组..我已经在这个 fiddle 中修改了您的代码:

JSFiddle showing a possible solution

添加列后，您应该给它们这样的样式:

.worktop_central .row .column {
    width: 216px;
    float: left;
    margin-left: 10px;
}

内部 div 的选择器应更改为:

.worktop_central .row .column div{

希望这有帮助..