JSSOR slider: Image Gallery demo add CSS rules for

问题:

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;                                    
}

回答1:

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;
}