css - JSSOR slider :“图库”演示持续在移动设备上显示高光图像

Question

我正在使用带有箭头导航器外观19和缩略图导航器外观7的图像库滑块。但是，在以下默认图像库演示中也可以观察到此问题：JSSOR slider: Image Gallery Demo。

以下是发生的情况。

桌面：鼠标进入缩略图导航器时，幻灯片会暂停，并且悬停图像t01.png将显示在箭头导航器旁边。

然后将鼠标放在该位置时，幻灯片放映仍会暂停。

现在，当鼠标离开滑块或单击新的缩略图时，悬停图像将正确移动到下一个单击的幻灯片，随后，如果鼠标离开滑块容器，则幻灯片将继续显示正确​​的幻灯片上显示的悬停图像。

移动版：但是，此行为在Firefox和适用于Android的Chrome最新版本上有所不同。我正在三星S4上进行测试，但是我认为这在其他设备上也可以观察到。

在这里发生的事情是，当点击缩略图时，滑块将移动到正确的幻灯片，并且箭头导航器出现。

但是现在，当让幻灯片继续播放时，突出显示的缩略图将保持突出显示状态，并且箭头将继续显示。

这导致悬停图像在突出显示的缩略图库中循环，而不是仅突出显示滑块中当前显示的缩略图。

在缩略图导航器外观7中，我注释了以下内容，因为否则将继续显示突出显示的边框。

/* if the mouse stays on the clicked image the hover colour will not fade to white
    this leads to the hover colour staying like this on mobile devices since
    the device, once clicked on the thumbnail gallery beliefs that the finger
    is still resting on the thumbnail and therefore keeps the thumbnail hover colour
    making it cycle through the thumbnail gallery
.jssort07 .pav:hover .o
{
    border-color: #0099FF; (light blue)
} */

评论选择器确实起到了帮助，因为曾经轻按的缩略图不会保持淡蓝色，而是通过幻灯片在幻灯片中循环显示，而只是像缩略图导航器7一样保持白色边框。

我希望缩略图库的行为方式是：一旦轻按了缩略图，突出显示边框或突出显示图像就会移动到该缩略图，并且当幻灯片放映继续进行时，它应该仅正确突出当前显示的幻灯片，而不要让旧的，以前点击的幻灯片将继续突出显示。

理想情况下，箭头导航器也应在轻击缩略图之前和之后，一旦轻按缩略图，并且一旦幻灯片移至轻按缩略图，也应停止突出显示或始终显示。

我认为这里发生的事情是，一旦在缩略图库上轻按了它并未在智能手机上停止的事件，使箭头导航器继续显示（不是那么糟糕），但仍保留了高亮图像或高亮边框颜色。在继续幻灯片放映的同时点按了缩略图。最后导致两个突出显示的缩略图。一个指示当前显示的幻灯片的正确位置，另一个指示缩略图库。

如果您（JSSOR作者）拥有智能手机，则也可以在默认的图片库演示中观察到此行为。如果您可以更新图库演示以更改此行为，那就太好了。否则，如果您能让我知道如何阻止这种情况发生，那也将非常好。除了这个小怪癖之外，它在移动设备上也非常好且快速。

感谢您的任何帮助。

编辑：我忘了提起，当最初在缩略图库中第一次点击后，我在滑块容器外的任意位置点击突出显示的图像或突出显示的第一个被轻击的缩略图的边框而不再突出显示，并且箭头导航器也停止显示。因此，显然必须在滑块容器内敲击来做一些事情。我希望所有这些信息都可以帮助您找到一种摆脱这种行为的方法。

编辑2：
好的，通过您的回答，我设法获得了想要的移动设备的确切行为。但是我也稍微改变了过渡状态。

发生的事情是，一旦轻按了缩略图，白色边框将很快亮起，然后当缩略图行进/循环到轻按缩略图时，白色边框将再次变暗，然后它将再次点亮。我还设法更改了不透明度，当缩略图移动到轻击的项目时，这种不透明度也发生了变化，它会变亮，在等待项目处于正确选择状态时变黑，然后再次亮起。

以下是我的HTML，但仍带有内联CSS。我相信这也可能会帮助其他用户在移动设备/台式机上遇到这种行为。

<!-- ThumbnailNavigator Skin Begin -->
<div u="thumbnavigator" class="jssort07" style="position: absolute; width: 800px; height: 100px; left:0px; bottom: 0px;">
    <!-- Thumbnail Item Skin Begin -->
    <style>
        /* jssor slider thumbnail navigator skin 07 css */
        /*
        .jssort07 .p            (normal)
        .jssort07 .p:hover      (normal mouseover)
        .jssort07 .pav          (active)
        .jssort07 .pav:hover    (active mouseover)
        .jssort07 .pdn          (mousedown)
        */
        .jssort07 .i
        {
            position:absolute;
            top: 0px;
            left: 0px;
            width: 72px;
            height: 72px;
            filter: alpha(opacity=60);
            opacity: .6;
        }
        .jssort07 .p:hover .i, .jssort07 .pav .i
        {
            filter: alpha(opacity=100);
            opacity: 1;
        }
        .jssort07 .o
        {
            position: absolute;
            top:0px;
            left:0px;
            width:72px;
            height:72px;

            border: 2px solid #000;

            transition: border-color .6s;
            -moz-transition: border-color .6s;
            -webkit-transition: border-color .6s;
            -o-transition: border-color .6s;
        }
        * html .jssort07 .o
        {
            /* ie quirks mode adjust */
            width /**/: 72px;
            height /**/: 72px;
        }
        .jssort07 .pav .o, .jssort07 .p:active .o
        {
            border-color: #fff;
        }
        /* looking at the demo and my project I don't really need the light blue condition, neither for mobile nor desktop
        .jssort07 .pav:hover .o
        {
            border-color: #0099FF; (light blue)
        }*/
        .jssort07 .p:active .o
        {
            border-color: #fff;
            filter: alpha(opacity=100);
            opacity: 1;
            /* transition: none;
            -moz-transition: none;
            -webkit-transition: none;
            -o-transition: none; */
        }
    </style>
    <div u="slides" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
        <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
            <div u="thumbnailtemplate" class="i" style="position:absolute;"></div>
            <div class="o">
            </div>
        </div>
    </div>
    <!-- Thumbnail Item Skin End -->
</div>
<!-- ThumbnailNavigator Skin End -->

最后，我要感谢您的快速而彻底的帮助。做得好。网站上线后，我会尝试向您发送链接，以便您进行检查。

谢谢 ;）

编辑3：由于移动设备上的鼠标悬停/移动行为与台式机不同（自然），我仍然没有得到我希望在移动设备上看到的确切行为。

经过几次测试，我意识到，当我对移动设备上的行为感到满意时，它在台式机上看起来并不理想；如果我对台式机行为感到满意，则它在移动设备上无法正常工作。

因此，我正在考虑要么开始使用Modernizr来检查移动浏览器，然后为移动浏览器（而不是桌面浏览器）分配不同的活动状态，要么我可以尝试使用几行jQUery来使其工作。如果您知道我的意思，基本上处于活动状态和悬停状态会混合使用，或者某种形式会同时用于移动设备和台式机。

尽管也许我可以通过 .i， .o和 .p类避免所有这些情况？您能否让我知道“缩略图”导航器皮肤中的这些类是什么？如果我可以使用这些类为移动设备和桌面设备分别设置活动状态和悬停状态的样式，那将是非常不错的！

通过这个问题 jssor: undocumented t3 d3 properties - how to，我在这里找到了一些信息： Slider with Caption (jQuery code)，但是不幸的是，我似乎找不到关于 .i， .o和 .p类的信息。

谢谢您的帮助。

Answer 1

对于移动设备，鼠标悬停/移出行为与台式机不同。
对于移动设备，请使用：active而不是：hover。

因此，请在缩略图导航器外观CSS中将所有'：hover'替换为'：active'。

重新编辑3：

给定缩略图原型和缩略图源，如下所示，

<!-- prototype -->
<div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
    <div u="thumbnailtemplate" class="i" style="position:absolute;"></div>
    <div class="o">
    </div>
</div>

<!-- thumbnail source -->
<img u="thumb" src="../img/alila/thumb-12.jpg" />

最终，它将生成如下的缩略图项目，

<div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
    <img src="../img/alila/thumb-12.jpg"  class="i" style="position:absolute;"/>
    <div class="o">
    </div>
</div>

现在您可以看到类“ p”，“ i”和“ o”如何应用于缩略图项目。