将鼠标悬停在另一张图片 Cargo 上时，我无法显示一张图片

Question

我在将鼠标悬停在带有 link {image 15} 的另一张图片上时尝试显示图片 {image 16} 时遇到问题。我在 Cargo 上建立我的网站，因为我对编码知之甚少。这个网站建设者限制我的选择，只能将我的图像放在网格中，并且由于这些网格已经有一个 div class，我无法让 Cargo 接受 div classes im making for each image-可能是因为我做错了。最重要的是，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;
}

Answer 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>

Answer 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>

将鼠标悬停在另一张图片 Cargo 上时，我无法显示一张图片

I can't get an image to appear when hovering on another image, Cargo

html

css

hover

cargo