时间戳

首页 > 解决方案 > 悬停图像未居中（CSS + JS）

javascript - 悬停图像未居中（CSS + JS）

问题描述

在以下解决方案中，我似乎无法将悬停时出现的图像置于屏幕中央。

我该如何解决这个问题？这是 CSSposition问题还是可以在 JS 中解决？

https://jsfiddle.net/Mengolor/2wzv6tr1/1/

div {
    position: relative;
    border: 1px solid gray;
    border-radius: 6px;
    width: 600px;
    height: auto;
    top: 250px;
    left: 100px;
}

img#image {
    position: absolute;
    display: none;
    z-index: 99;
    max-width: 50vw;
  transform: translate(-50%, -50%);
}

h3 {
  padding: 40px;
}

span:hover img#image {
    display: block;
  pointer-events: none;
}

$(document).mousemove(function(e){
        const { scrollTop, scrollLeft } = document.documentElement;
    $("#image").css({left:e.clientX + scrollLeft, top:e.clientY + scrollTop});
});

标签： javascriptcssdebugging

解决方案

不要使您的位置属性相对，请尝试位置：中心；

div {
	position: center;
	border: 1px solid gray;
	border-radius: 6px;
	width: 600px;
	height: auto;
	top: 250px;
	left: 100px;
}

我在 JSFiddle 控制台中对此进行了测试，它似乎有效。

推荐阅读