將鼠標懸停在div而不移動其他div

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顯示了一個可能的解決方案

添加列后，您應該給它們這樣的樣式：

.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。 希望這可以幫助..