javascriptcssvuejs3

On hover, display overlay element but it is blinking

I have a canvas and overlay text on top of it. I want to display the text only if mouse is hovering on the canvas.
It is working on simple HTML https://codepen.io/Ariel-Ariel-the-bold/pen/MYgvvxZ

.rootc {
  display: flex;
}

.container {
  flex-grow: 1;
  flex: 1;
  position: relative;
  background-color: green;
}

.div1 {
  width: 100%;
  background-color: red;
}

.div1:hover ~ .div2 {
  display: flex;
}

.div2 {
  position: absolute;
  background-color: yellow;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: none;
}
<div class="rootc">
  <div class="container">
    <canvas class="div1"></canvas>
    <div class="div2">
      <h1>This is a text</h1>
    </div>
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
</div>

but not on vue app https://codesandbox.io/p/sandbox/blue-surf-h8gm3l
on vue app, it is blinking
how do I achieve this on vue app ?

Solution

  • .div2 appears on top of the .div1, so mouse is no longer hovering over .div1, so .div2 dissappears, so mouse again hovering over .div1, so .div2 appears again...

    Add following CSS to resolve the issue. 

    .div2:hover {
  display: flex;
}