Respond to mouse events when behind other components?
Closed this issue · 3 comments
Hello,
Right now I want to use Vue-Kinesis as part of the background of my website and as a result I am making it render at a negative z-index. However, I am having trouble with getting it to respond to mouse movement. Is there a way to get it to respond to mouse movement events even if behind other components?
Hello!
Well I guess if you put the kinesis-container at a negative z-index then the mouseover event doesn't trigger, which is the expected behavior. What you can do is to have only the kinesis-elements render at a negative z-index. Then you just need to figure out where to put the kinesis-container in your app.
Let me know if it helps.
Looks like that doesn't work. Any idea of alternate approaches without using a negative z-index? Understandable if not, feel free to close this.
I made this Codesandbox so it might help you get the idea.
https://codesandbox.io/s/long-leaf-yc6d0?file=/src/App.vue
The logo is rendered at a negative z-index, and is positioned behind other elements. The kinesis-container is kept as is, without negative z-index.