Handle mouse event

Get Help
1

I really need help to figure out how to use mouse event in different pages of lightning js app. i followed some instructions like to add collision: true . i have added that in every parent element. Then i also tried by adding zIndex. nothing works for me. only in the widgets i can use mouse elements. in pages i can’t use it. i have used my page as this in App.js file.

 Pages: {
          collision: true,
          zIndex: 10,
          forceZIndexContext: true,
        },

Then i just rendered components in different route in routes.js file.

export default [
  {
    path: 'home',
    component: Item,
  },
];

And here i just wanted to see my hover and click logs. but it won’t work.

import { Lightning, Router } from '@lightningjs/sdk';

export default class Item extends Lightning.Component {
  static _template() {
    return {
      collision: true,
      zIndex: 100,
      visible: true,
      color: 0x00ffffff,
      rect: true,
  }

  _handleClick() {
    console.log(`ITEM:----- Clicked worked`);
  }

  _handleHover() {
    console.log('ITEM:----- Hover Worked');
  }

  _handleUnhover() {
    console.log('ITEM:----- Unhover Worked');
  }
}

If anyone had face same issues let me know. Thanks.

2

Same issue here, any solution?

3

Do either of you have a sample github that I can look at? Also make sure each component has a width and a height… that is one of the most important things (w & h)