Question

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

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

但我想在调用灯箱时，nextIcon / previousIcon始终在图像外部可见。

用＆＃34; span.featherlight-next＆＃34;做了一些测试。 RESP。＆＃34; span.featherlight-以前＆＃34;所以左/右图标在图像之外...但直到现在我还没有找到如何做到这一点。

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

非常感谢任何帮助。

Answer 1

感谢您的回答。好吧，我想出了一个满足我需求的解决方案。事实上，我刚刚在.featherlight-image的边框内移动了上一个/下一个导航图标，图标只是在鼠标悬停时可见（这是默认设置）。

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

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

然后我很好地调整了.featherlight-next＆amp; .featherlight-previous和它的span类基于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。

featherlight.js：如何使nextIcon和previousIcon始终可见

2 个答案: