.hover留在同一個地方，而IMG和文字響應

Question

What the html looks like

我的問題是在一個大的視圖中的.hover看起來不錯，但是當屏幕小的.hover停止對準我怎麼想它。

如何在小視圖中使.hover看起來明顯更好？

Answer 1

您可能想要檢查您的懸停停止在哪個斷點上，以您想要的方式停止。您可以在您的檢查員中切換：懸停，以查看懸停div不在所需位置的寬度。

在知道div放錯位置的寬度後，您可以添加media queries。在該查詢中，您說（max-width：1000px）{}您可以更改懸停div的邊距。

Answer 2

我想你可以做的是將.hover元素放置到觸發它顯示的元素中。 .hover元素需要被完全放置在非位置元素的內部：static;

在容器中懸停內容與標籤一起使用的好處意味着，當頁面調整大小時，它們一起移動。

您可以根據媒體查詢更改.hover出現的位置。

HTML：

<div class="container"> 
    <div class="label">Label</div> 
    <div class="hover-content">This is the hover</div> 
</div> 

CSS：

.container { 
    position: absolute; 
    top: 100px; 
    left: 300px; 
    border: 1px solid #000; 
} 

.hover-content { 
    position: absolute; 
    top: 0; 
    left: 100%; 
    margin-left: 20px; 
    display: none; 
} 

.label { 
    padding: 10px; 
} 

.container:hover .hover-content { 
    display: block; 
    width: 200px; 
    background-color: #000; 
    color: #fff; 
    padding: 10px; 
} 

@media (max-width: 600px) { 
    .hover-content { 
    left: auto; 
    right: 100%; 
    margin-left: 0; 
    margin-right: 20px; 
    } 
} 

http://codepen.io/anon/pen/XjobdN