JSSOR slider：Image Gallery demo在桌面上为活动mousedown事件添加CSS规则 [英] JSSOR slider: Image Gallery demo add CSS rules for active mousedown event on desktop

问题描述

对于可在此处看到的演示图片库演示我喜欢在用户保持鼠标按钮按下时添加CSS规则，因此在缩略图库中的缩略图上显示活动mousedown事件。

我希望有不透明度活动点击的缩略图为100％（我设法做的），以及在缩略图项目周围有一个白色实线边框或2px。边界是我正在努力的。

感谢您的帮助。

  .jssort07 .p：hover .i，.jssort07 .pav .i {
 filter：alpha（opacity = 100）; 
 opacity：1; 
} 
 
 
 / *用于桌面行为的缩略图mousedown活动事件* / 
 / * .pdn，因为这是（mousedown）给定的JSSOR文档* / 
 
 .jssort07 .p：active .i，.jssort07 .pdn .i {
 filter：alpha（opacity = 100）; 
 opacity：1; 
 
 / *如何为这个事件添加一个2px白色边框的CSS * / 
 / *这下面不工作* / 
 border：2px solid white; 
} 
  

解决方案

p>

如果添加了2px边框，请减小其大小。

  .jssort07 .p：active .i，.jssort07 .pdn .i {
 filter：alpha（opacity = 100）; 
 opacity：1; 
 
 border：2px solid white; 
 width：68px; 
 height：68px; 
} 
  

For the demo that can be seen here Image Gallery Demo I like to add CSS rules for when a user keeps the mouse button pressed down, so active mousedown event, on a thumbnail in the thumbnail gallery.

I would like to have the opacity of the active clicked thumbnail to be at 100% (what I managed to do) as well as have a white solid border or 2px round the thumbnail item. The border is what I am struggling with.

Thank you for your help.

.jssort07 .p:hover .i, .jssort07 .pav .i {
    filter: alpha(opacity=100);
    opacity: 1;
}    


/* thumbnail item mousedown active event for desktop behaviour */
/* .pdn since this is (mousedown) given the JSSOR docs */

.jssort07 .p:active .i, .jssort07 .pdn .i {
    filter: alpha(opacity=100);
    opacity: 1;

    /* how can I add CSS for a 2px white border for this event please */
    /* this below does not work */
    border: 2px solid white;                                    
}

解决方案

It worked already.

As 2px border added, please decrease the size of it as well,

.jssort07 .p:active .i, .jssort07 .pdn .i {
    filter: alpha(opacity=100);
    opacity: 1;

    border: 2px solid white;
    width: 68px;
    height: 68px;
}

这篇关于JSSOR slider：Image Gallery demo在桌面上为活动mousedown事件添加CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！