懸停DIV然後顯示另一個div *而無需重新定位它

這就是我試過的。 CSS：懸停DIV然後顯示另一個div *而無需重新定位它

div#Layer3:hover div#Layer3copy 
{ 
    display: inline-block; 
}

HTML：

<div id="Layer3"><img src="images/Layer3.png"> 
     <div id="Layer3copy"><img src="images/Layer3copy.png"></div>    
    </div>

我想這個div被隱藏，當懸停另一個DIV它出現，然而，它工作正常，

但是從移動一點點它實際的地方，

是否有解決方案呢？

來源

2017-01-01 Sayed Hasan

從這種和平的代碼我們看不到div的移動的原因。我建議你創建[JsFiddle]（jsfiddle.net）以及更完整的html和你的頁面的CSS。 –

原來是內聯塊嗎？也許如果它是塊元素，並改變爲內聯造成位置的差異。 –

好吧，首先你需要知道CSS 的顯示，位置和僞態性質在你的代碼段＃三層的包裹＃Layer3copy所以我們可以通過直接孩子選擇即

#Layer3:hover > #Layer3copy{ 
    /*Do your things here*/ 
    }

調用它懸停狀態

工作示例：https://jsfiddle.net/ishusupah/eupfr101/

在本示例中，您正在使用＃Layer3copy display：none和懸停狀態，我將它顯示爲：block。

不管你想要什麼，你都可以顯示和定位。

來源

2017-01-01 13:22:43 Ishu

你沒有隱藏/顯示任何div。你在上面的代碼中實際做的是當Layer3 div被徘徊時，你正在改變Layer3copy div風格爲inline block - 這就是它移動的原因。一個div默認是一個block元素 - 這意味着它佔據了一行的整個寬度。當你將它改爲inline-block時，如果在一行中有足夠的寬度，而不是全部寬度，「正在告訴」div將對齊另一個元素，這就是爲什麼div移動到父div旁邊的原因。

您還需要修改您的選擇器以實現您的要求。

要真正實現你想要的（隱藏，沒有它被移動顯示回Layer3copy），使用這個CSS代碼：

#Layer3 #Layer3copy{ 
    display: none; 
} 

#Layer3:hover #Layer3copy{ 
border: 3px solid red; 
display: block; 
}

中的第一選擇是給默認定義時layer3 - 集裝箱股利是沒有徘徊 - 其中子Layer3copy div沒有顯示（display:none）。

第二選擇是說當layer3懸停將樣式應用到Layer3copy並把它轉化爲display:block - 其是用於divs默認顯示（它們是塊元素） - 這是越來越顯示它和保持它的初始位置，而不會「運動」。

Here is a working example with the above code.

我還添加了一個纖細的紅色邊框內的div，所以你會明白我的意思的block元素 - 這是連續服用的整個寬度。

來源

2017-01-01 12:55:38

嘗試使用此

#Layer3:hover > #Layer3Copy { 
position: absolute; 
display: inline-block; 
/** Postion of your div **/ 
}

嘗試，直到它被放在任何你希望它是在調整位置。我認爲你想要像一個工具提示或東西

來源

2017-01-01 13:44:11 BrxDgr8t

懸停DIV然後顯示另一個div *而無需重新定位它

回答

相關問題