Question

我在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但这不是问题。

亲切的问候

Answer 1

正如您在网站中所看到的，图像悬停是相对的，因此您始终需要滚动才能看到图像。您可以对图像使用绝对位置，在这种情况下，您不需要滚动。

检查出来

<强> CSS

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

<强> DEMO HERE

Answer 2

试试这段代码：

＆＃13;

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

＆＃13;

Answer 3

您可以为图片提供以下内容：

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

请确保仅将这些会话应用于补充工具栏图片。

Answer 4

更改此

a:hover img {
display: block;
}

至此

a:hover img {
display: inline;
}

Answer 5

这有帮助吗？

＆＃13;

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

＆＃13;

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

＆＃13;

在悬停上显示文本图像

5 个答案: