Javascript：在同一位置切換圖像

on this website我遇到了一些切換圖像的麻煩。Javascript：在同一位置切換圖像

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

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

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

這是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; 
}

<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>

來源

2017-08-15 A.Hilt

這

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

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

來源

2017-08-15 10:06:53 newBee

嗨，這不是我需要完成的。我需要修復的是在單個表格的行上將鼠標懸停在相同位置的圖像。正如你所看到的，看起來每張照片都在向下移動。只有第一個位於頂端。 –

轉載：旁邊的每張圖片都應該垂直對齊左邊的桌子頂部？ – newBee

確切地說，這是我想要做的:) –

刪除

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

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

來源

2017-08-15 10:19:38

請解釋爲什麼刪除提供的代碼片段解決了OP的問題。雖然這個答案可能有助於解決這個問題，但是沒有其他人可以從中獲益 – Clijsters

@ A.你添加的圖像被包含在一個具有30px邊距的div中，因此當你在第二個表格行上懸停時，第二行內的圖像被切換，第一個div的邊距爲30像素，在其頂部創建30像素的空白。您可以通過在開發工具中檢查您的div來進行檢查 –

Javascript：在同一位置切換圖像

回答

相關問題