featherlight.js:如何让nextIcon和previousIcon始终可见

Question

我成功地在我的wordpress博客上实现了featherlight.js插件，将一些照片显示为灯箱。

默认情况下，仅当鼠标悬停在图像的特定区域时，featherlight.js才会显示nextIcon和previousIcon。

但我希望在调用lightbox时，nextIcon/previousIcon始终在图像外部可见。

分别用“span.fefetherlight-next”做了一些测试。“span.fefetherlight-previous”，这样左/右图标就在image...but之外，直到现在我还不知道该怎么做。

有人知道如何修改CSS文件以使nextIcon和previousIcon始终可见吗？

任何帮助都是非常感谢的。

Answer 1

谢谢你的回答。嗯，我想出了一个满足我需求的解决方案。事实上，我只是在.fefetherlight-image的边框内移动了上一个/下一个导航图标，这些图标只是在鼠标悬停时可见(这是默认设置)。

首先，我给图像设置了一个更大的白色边框：

.featherlight .featherlight-image { max-width: 100%; border: 32px solid #fff; }

然后我微调了.feaptherlight-next和.fefetherlight-previous，它是基于featherlight.gallery.css的跨度类，如下所示：

.featherlight-next,
.featherlight-previous {
    display: block;
    position: absolute;     
    top: 25px;
    right: 0px;
    bottom: 0;
    left: 80%;
    cursor: pointer;
    /* preventing text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* IE9 hack, otherwise navigation doesn't appear */
    background: rgba(0,0,0,0);
}

.featherlight-previous {
    left:  0px;
    right: 80%;     
}

.featherlight-next:hover,
.featherlight-previous:hover {
    background: rgba(0,0,0,0.0);
}

.featherlight-next span,
.featherlight-previous span {
display: none;
    position: absolute;
        top: 50%;
        width: 80%; 
        font-size: 22px;
        line-height: 50px;
        /* center vertically */
        margin-top: -40px;
        color: #777;
        font-style: normal;
        font-weight: normal;
        text-shadow: 0px 0px 3px #888;
}

.featherlight-next span {
    right: 7px;
    left: auto;
    text-align: right;
}

.featherlight-previous span {
    right: 0px;
    left: 7px;      
    text-align: left;
}


.featherlight-next:hover span,
.featherlight-previous:hover span {
    display: inline-block;
}

/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
        display:none;
}

将背景设置为白色也有助于隐藏白色图像边框/框架，以便导航图标在悬停时更具区别性：

.featherlight:last-of-type {
    background: rgba(255, 255, 255, 0.6);
}

希望这对某些人有帮助;-)

Answer 2

检查来源。你会发现隐藏/显示是如何实现的：

    .featherlight-next span,
    .featherlight-previous span {
        display: none;
        // ...
    }
    .featherlight-next:hover span,
    .featherlight-previous:hover span {
        display: inline-block;
    }

因此，您只需使用自己的自定义规则覆盖display: none即可。