悬停上的文字显示图像

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

悬停上的文字显示图像

回答

相关问题