Question

当您将鼠标悬停在链接上时，我试图在屏幕中央显示图像。我在悬停在链接上时会出现一张图片，但现在我无法将其置于中心位置。

这是我的HTML：

<div class="hover_img">
 <a href="#">A picture of my face<span><img src="/image.png"/></span></a>

和CSS：

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99;}
.hover_img a:hover span { display:block;}

Answer 1

我不确定这是否是您想要的，但在这里您有一个有效的例子https://jsfiddle.net/vqxb20vg/2/

HTML

<div class="hover_img">
 <a href="#">
   A picture of my face<span><img src="/image.png"/></span>
 </a>
</div>

CSS

.hover_img { 
  position:relative;  
}
.hover_img a span { 
  position:absolute; 
  display:none; 
  z-index:99;
  left:50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.hover_img a:hover span { 
  display:block;
}

Answer 2

你现在可以检查一下吗？这是你正在看的。

.hover_img a span { position:absolute; display:none; z-index:99;}

.hover_img a:hover span{
    display:block;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

<div class="hover_img">
 <a href="#">A picture of my face<span><img src="http://www.bhea.com/images/logo1.png"/></span></a>
</div>

将鼠标悬停在链接上时，在屏幕中央显示图像

2 个答案: