Javascript：在同一位置切換圖像

Question

on this website我遇到了一些切換圖像的麻煩。

正如你可以看到我有一個內容表的左側，並與單排的圖像右側切換的鼠標。

碰巧那些圖像不是在相同的位置，但每個圖像移動「下」。

我怎樣才能讓他們全部在上面？

這是CSS代碼，我用JS腳本：

CSS（隱藏圖像）

.haus-a-one,.haus-a-two,.haus-a-three,.haus-a-four,.haus-a-five,.haus-a-six,.haus-a-seven,.haus-a-eight { 
display: none; 
} 

JS

<script> 
    jQuery(document).ready(function($){ 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-2.even", function() { 
$('.haus-a-one').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-3.odd", function() { 
$('.haus-a-two').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-4.even", function() { 
$('.haus-a-three').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-5.odd", function() { 
$('.haus-a-four').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-6.even", function() { 
$('.haus-a-five').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-7.odd", function() { 
$('.haus-a-six').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-8.even", function() { 
$('.haus-a-seven').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-9.odd", function() { 
$('.haus-a-eight').toggle(); 
}); 

}); 
</script> 

Answer 1

這

.so-panel { 
    margin-bottom: 30px; 
} 

導致您的每個細胞都有一個因此即使圖像不可見，高度也是如此。從包含圖像的div中刪除這個樣式，你很好走。

Answer 2

刪除

#pg-220-0, #pg-220-1, #pl-220 .so-panel { margin-bottom: 30px; }

解決您的問題，但你必須檢查什麼的所有組件可以實現。