Aframe.io: Add border to <a-curvedimage> on mouseover using

Question

How would I add a border to a curved image when selected?

The following code will change the material color of the image however I'd prefer to add a border or glow instead.

AFRAME.registerComponent('selectable', {

    init: function () {
        var el = this.el;
        this.el.addEventListener('mouseenter', function (evt) {
            this.setAttribute('material', 'color', 'blue');

        });
        this.el.addEventListener('mouseleave', function (evt) {
            this.setAttribute('material', 'color', '');
        });

    }
});

Here is a JSBIN showing showing the above

Answer 1

Create a slightly bigger <a-curvedimage> behind yours, but don't give it an image texture src , just provide a solid color and perhaps toggle opacity/visibility.

AFRAME.registerComponent('selectable', {

    init: function () {
        var el = this.el;
        var backgroundEl = el.sceneEl.querySelector('#backgroundEl');
        this.el.addEventListener('mouseenter', function (evt) {
            backgroundEl.setAttribute('visible', true);

        });
        this.el.addEventListener('mouseleave', function (evt) {
            backgroundEl.setAttribute('visible', false)
        });

    }
});