Change CSS Property of 3DImage widget via click or JS.

[Aouellets]

As context, working on a mobile project. 

Goal here is simply to highlight a 3D Image widget when it is being clicked. Obviously the easiest method is with css using the "class:psuedo-class" active state. However that doesn't work. 

I have already verified that the property can be applied to the widgets. 

My question is as to the best approach?

A) Use JS to change the class of the widget and then run a timeout to change it back after one second?

B) Continue to try and use a psuedo-class?

[Aouellets]

Thinking something like....

$scope.Active = function (elem) {

document.getElementById(elem).classList.add('ActiveBTN');

$timeout(function(){

document.getElementById(elem).classList.remove('ActiveBTN');

}, 1000 )

}

[dsgnrClarK]

I add this to a Button, it works.

.btnText{
  color: firebrick;
  font-size: 1em;
}

.btnText:active{
  color: steelblue;
  font-size: 2em;
}

Nevertheless, Style changes right away when the Press stops.

So, JavaScript could be a more versatile approach.

BRs,