懸停上的文字顯示圖像

我在http://prestashop.suszek.info/3-women有商店。在左邊有一種顏色。每種顏色旁邊都有一個「podgląd」字符串。目前，當您將鼠標懸停在文字上時，圖像會顯示在下方。如何在沒有滾動的情況下在旁邊顯示圖像？懸停上的文字顯示圖像

<a href="#">(podgląd)<img src="http://prestashop.suszek.info/img/co/13.jpg"></a> 

a img { 
    display: none; 
} 
a:hover img { 
    display: block; 
}

btw：ime in null，但這不是問題。

親切的問候

來源

2017-01-12 Przemysław Suszek

嘗試顯示：內聯時，懸停 – slashsharp

嘗試顯示：inline-block的時候懸停 –

你可以給下面的圖片：

position: absolute; 
z-index: 100; 
.. and set margin based on what you want

只要確保你只將這些段落應用於側欄圖片。

來源

2017-01-12 08:50:29

試試這個代碼：

a:hover img { 
 
    display: inline-block; 
 
}

來源

2017-01-12 08:49:38

如果你要使用的一個片段，包括完整的例子。否則，只需將代碼發佈在代碼塊中 –

當你在你的網站，圖像懸停是相對的，所以你總是需要滾動的看到圖像。你可以使用位置絕對值的圖像，在這種情況下，你不需要滾動。

檢查了這一點

CSS

a img { 
    display: none; 
} 
a:hover img { 
    position:absolute; 
    display: block; 
    left:0; 
}

DEMO HERE

來源

2017-01-12 08:50:09

改變這種

a:hover img { 
display: block; 
}

爲了這

a:hover img { 
display: inline; 
}

來源

2017-01-12 08:51:33

這是幫扶？

a{ 
 
    padding: 10px; 
 
    position:relative; 
 
} 
 
img{ 
 
    display:none; 
 
    position:absolute; 
 
    left:100px; 
 
    top:0; 
 
    width:400px; 
 
    
 
} 
 
a:hover img{ 
 
    display: block; 
 
}

<a href="/">Hover me <img src="https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop="></a> 
 
</br> 
 
<a href="/">Hover me <img src="https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop="></a> 
 
</br> 
 
<a href="/">Hover me <img src="https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop="></a> 
 
</br> 
 
<a href="/">Hover me <img src="https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop="></a>

來源

2017-01-12 09:37:24 bens

懸停上的文字顯示圖像

回答

相關問題