Question

我有一张物品表，当我将它们悬停在其中一项上时，应该显示一张图像。页面的背景/其余部分应显示为灰色，图像应显示在中间。
这是我目前拥有的：

代码：

function imageAppear(id) {
  document.getElementById(id).style.visibility = "visible";
}

function imageDisappear(id) {
  document.getElementById(id).style.visibility = "hidden";
}

.tool {
    border-collapse: collapse;
    border-spacing: 0;
    margin-left: 20px
}

.tool td {
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: black;
}

.tool .border {
    font-family: Arial, Helvetica, sans-serif !important;
    ;
    border-color: inherit;
    text-align: center
}

<table class="tool">
    <tr>
        <td class="border" onmouseover="imageAppear('ocr')" onmouseout="imageDisappear('ocr')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" id="ocr" style="z-index: 100; position: absolute; visibility: hidden;" /></td>
        <td class="border" onmouseover="imageAppear('fe')" onmouseout="imageDisappear('fe')">FE<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" id="fe" style="z-index: 100; position: absolute; visibility: hidden;" /></td>
    </tr>
</table>

这有效，因此一旦我将鼠标悬停在某个项目上，该特定图像就会显示出来。但是，如何将图像放置在屏幕中央并在背景之外使背景变灰呢？当我从元素上删除光标以在图像中向下滚动时，图像显然消失了。也有解决方法吗？我已经尝试过类似显示here的方法，但是没有运气。

此外，图像非常长，需要向下滚动。这里的问题是，即使当前没有图像显示，网页底部也会产生较大的空白。有办法防止这种情况吗？

Answer 1

解决方案是在表中引入wrapper，并使用以下样式将新的light-box元素变灰为背景。

.wrapper{
    position: relative; 
    z-index: 1;
    width: 100vw;
    height: 100vh;
}

和

.light-box{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ccc;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
}

此外，新样式（强烈建议将这些内联样式移动到css文件中）添加到img中，以使其居中对齐。

style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"

这是一个Codepen链接。希望这会有所帮助。

在悬停时显示图像并变灰背景

1 个答案: