将鼠标悬停在另一个图像上时，我无法显示图像，货物答案

【问题标题】：I can't get an image to appear when hovering on another image, Cargo将鼠标悬停在另一个图像上时，我无法显示图像，货物
【发布时间】：2022-02-09 04:19:05
【问题描述】：

当我将鼠标悬停在带有链接 {image 15} 的另一张图片上时，我在尝试使图片 {image 16} 出现时遇到问题。我正在 Cargo 上建立我的网站，因为我对编码知之甚少。这个站点构建器将我的选项限制为仅将我的图像放在网格中，并且由于这些网格每个都有一个 div 类，我无法让 Cargo 接受我为每个图像制作的 div 类 - 可能是因为我正在做它错了。最重要的是，Cargo 不允许我查看所有 HTML，只能查看特定部分。任何帮助都将受到超级欢迎，在此先感谢您！

HTML：

<div class="image-gallery" gid="21">

<div class="hover-image">{image 16}</div>

</div> <br>

<br><br>
<br>
<div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
    <div grid-col="x12" grid-pad="0"></div>
</div><br>
<div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
    <div grid-col="x12" grid-pad="0"><div style="text-align: left"><div class="image-gallery" gid="22">

<div class="hover-title">
<a rel="history" href="enlightened-type" class="image-link">{image 15}</a>
</div>

{image 5}
{image 13}
{image 14}
{image 12}
{image 11}
</div><br></div>
</div>
</div>
<br><div class="image-gallery" gid="23">
{image 17}
</div>2

CSS：

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    visibility: hidden;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}

【问题讨论】：

标签： html css hover cargo

【解决方案1】：

你需要一些 javascript。

为 image16 添加一个 id

<div class="hover-image" id="myhoverimage">{image 16}</div>

为 image15 添加一些事件监听器

 <a rel="history" href="enlightened-type" onmouseover="showImg()" onmouseout="hideImg()" class="image-link">{image 15}</a>

Javascript。（放在你的html底部）

  <script>

    var hoverImg = document.getElementById("myhoverimage");

    function showImg(x) {
      hoverImg.style.visibility = "visible";
    }

    function hideImg(x) {
      hoverImg.style.visibility = "hidden";
    }

  </script>

【讨论】：

非常感谢！成功了！
不客气。如果有效，您应该将答案标记为已接受。

【解决方案2】：

你可以做文档。内联调用。 ?

<a href="" onMouseOver="document.MyImage.src='./icon-on.png';" onMouseOut="document.MyImage.src='./icon-off.png';"> <img src="./icon-off.png" name="MyImage"></a>

【讨论】：