How to make an element disappear and stay gone after hovering over it?-CodePudding

So here is my code...

I understand how to make the text disappear by making it transparent but i want it to stay gone after hovering over it so it doesnt come back - how do I accomplish this?

.disappear {
     margin-top: 60px; 
     text-align: center;
     transition: all 5s ease .3s;
     font-family: Bungee Spice;
      }

 .disappear:hover {
 color: transparent;
   }

CodePudding user response：

you need to use onmouseover and remove() like this

function bye() {

  const dis = document.getElementById("dis");
  dis.remove();
}

* {
  padding: 0;
  margin: 0;
  /* border: 1px solid red; */
  overflow-x: hidden;
}

div {
  height: 50vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: xx-large;
  overflow: auto;
  background: lightblue;
}

<div >
  <h2 onm ouseover="bye()" id="dis">will go on hover</h2>
</div>

CodePudding user response：

I don't think it's possible to make it run smoothly with pure CSS, so far, this is what I think is close to what you want to accomplish. So before hover, the animation to make it gone is already set, but the animation is not running yet, the animation will run only if the element is hovered. The problem here is that when it's hovered then it's unhovered before it's gone, the element will be half gone as the animation is paused.

.container {
    width: 100%;
    height: 800px;
    background: #dddddd;
}
.disappear {
    margin-top: 60px;
    text-align: center;
    font-family: Bungee Spice;
    background: yellow;
    animation: example 5s linear forwards;
    animation-play-state: paused;
}
.disappear:hover {
    animation-play-state: running;  
}

@keyframes example {
    from {opacity: 1}
    to {opacity: 0}
}

<div >
    not disappear
    <div >
        DISAPPEAR
    </div>
</div>

The better way would be to use javascript and use onmouseover to add the animation instead of using :hover, the difference is that when you onm ouseout, the function is still executed (the animation persists). This is with JS:

function fade(elm) {
  elm.style.animation = "example 5s linear forwards";
}

.container {
  width: 100%;
  height: 800px;
  background: #dddddd;
}

.disappear {
  margin-top: 60px;
  text-align: center;
  font-family: Bungee Spice;
  background: yellow;
}

@keyframes example {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

<div >
  not disappear
  <div  onm ouseover="fade(this)">
    DISAPPEAR
  </div>
</div>