用户将鼠标悬停在文本上方时如何删除文本

Question

When a user hovers over a button I want to strike out the text.

Here is what I have so far:

 button{ background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; color: white; } body{ background-color: black } 

 <button>Hello</button> 

Any suggestion please

Answer 1

Just use the :hover CSS pseudo-class and the text-decoration CSS property .

And, really, if you just want text and aren't really making a clickable button , you can use just about any element, but a div allows you to remove all the styling you had to make the button not look like a button.

 body { background-color: black } div { color: white; cursor:pointer; } div:hover { text-decoration:line-through; } 

 <div>Hello</div> 

Answer 2

Here is the code:

 .btn-stroke{ background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; color: white; position: relative; line-height: 1; } /* Create a stroke with 0% of width */ .btn-stroke:after{ display: block; content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 0%; height: 5px; background-color: #000; transition: width 0.5s; } /* Using hover :pseudo-class increase width */ .btn-stroke:hover:after { width: 100%; } body{ background-color: black } 

 <button class="btn-stroke">Hello</button> 

Answer 3

Here is you code updated.

<button>Hello</button>




button {
      background-color: Transparent;
      background-repeat: no-repeat;
      border: none;
      cursor: pointer;
      overflow: hidden;
      outline: none;
      color: white;
    }

    body {
      background-color: black
    }

    button:hover {
      text-decoration: line-through;
}

You have to add only hover on your button, and text-decoration: line-through;