Question

我有12个div：

<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进行分组..我已经在这个小提琴中修改了代码：

JSFiddle showing a possible solution

添加列后，您应该给它们这种风格：

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

内部div的选择器应该改为：

.worktop_central .row .column div{

希望这会有所帮助..

Answer 2

您需要为每个div添加某种标识符（手动或编程），指示哪些应该扩展。

这可能是添加到您定位的div的类。如果您事先知道要扩展哪些内容，您甚至可以在悬停的div上使用数据属性指定它。

<div data-onhovermovedivs="5,9">1</div>

关键问题是 - 你如何决定哪些div需要扩展？

Answer 3

只需将float:left;添加到.worktop_central .row div:

即可

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

Answer 4

你可以用简单的jquery来做到这一点，例如：。

$('#a').mouseenter(function(){
$('#d, #c').animate({height:"600px"}, 400); 
});
$('#a').mouseleave(function(){
$('#d, #c').animate({height : "200px"}, 100); 
});

这是一个有效的jsfiddle：http://jsfiddle.net/fafchook/LJWMx/ 我为这个演示重新设计了你的css。希望这会有所帮助..

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

4 个答案: