悬停链接后显示大图答案

【问题标题】：Display large image after hover a link悬停链接后显示大图
【发布时间】：2017-02-15 16:12:52
【问题描述】：

我在 Prestashop 1.6 上购物。我在产品列表中创建了第三个视图。有一件事，我一个人是搞不定的。当您将光标移动到图像上（在第三个视图中）时，它会以大尺寸显示在它旁边，这没关系。我怎样才能将这个图像向右移动一点。如果我使用 margin-left 或 padding-left，图像会闪烁。我希望你明白我的意思。

  <div class="left image">
   <a href="#">
<img class="replace-2x img-responsive" src="/1-home_default/faded-short-sleeve-tshirts.jpg" width="250" height="250"></a></div>

.left {
    float: left;
    margin-left: 10px;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.image{
    width:32px;
    height:32px;
}

.image a:hover img{
    display: block;
    position: absolute;
    z-index: 999;
}

感谢您的帮助。亲切的问候

【问题讨论】：

请不要链接到外部网站。检查How-To-Ask 和How to create a Minimal, Complete, and Verifiable example 上的内部链接文章
我认为更快的方法是分享链接。我添加代码。
什么是“第三视图”？
Widok：平面列表。网格旁边的列表视图。你看到了吗？
@user3531797 这与问题的发展速度无关。为您以外的其他用户。当您的网站发生变化或链接失效时，问题就变得多余了，对未来遇到类似问题的用户毫无用处。

标签： html css hover

【解决方案1】：

尝试在加载的图像上使用不可见的边框。

border-left: 10px transparent;

这应该为您提供所需的空间，并停止使用边距时发生的闪烁。但是，当悬停此边框时，图像仍会显示。这真的取决于你想要什么结果。

【讨论】：

喜欢这个？ .image a:hover img{ 显示：块；位置：绝对； z指数：999；左边距：50px；左边框：50px 透明； }
当然，所以this is essentially 会发生什么。然而，在图像关闭之前，鼠标也需要离开边框。