使图像成为灯箱中的超链接

Question

我试图使灯箱项目内的图像 - “portfolio-1.png”在点击时指向解释页面.html 页面。但是，当我正常将鼠标悬停在图像上时，悬停时图像中会显示同一图像的较小版本，并且链接不起作用。

    <div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
        <div class="position-relative overflow-hidden mb-2">
            <img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
            <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
                <a href="img/portfolio-1.png" data-lightbox="portfolio">
                    <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
                </a>
                <!-- Add the link inside the lightbox item -->
                <a href="explainpage.html" data-lightbox="portfolio" data-title="Explanation">
                    <!-- This empty <a> tag is just a placeholder to enable linking the image -->
                    <img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
                </a>
            </div>
        </div>
    </div>


  [1]: https://i.stack.imgur.com/U1WDi.png

Answer 1

问题可能与 HTML 代码的结构有关。您将图像嵌套在锚标记中 (

<a>

)。这可能会导致悬停效果出现问题，并导致链接无法按预期工作。也许重构你的代码会有所帮助。例如-

<div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
<div class="position-relative overflow-hidden mb-2">
    <a href="explainpage.html" data-lightbox="portfolio" data-title="Explanation">
        <img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
    </a>
    <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
        <a href="img/portfolio-1.png" data-lightbox="portfolio">
            <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
        </a>
    </div>
</div>

编辑：也许您可以考虑在单独的 .css 文件中设置此结构的样式，以便于测试并提高可维护性。