Question 45524 in CSS Question posted in
Some basic documentation can be found here.

Need a "button" type element with an x at the top right that lets me delete the element itself. What am I looking for? – CSS

I know this question sounds odd. Perhaps a button is not the element I’m looking for. What I want to to do is have an element that looks like what I have here:
enter image description here

Now this is technically a button. However, I’d like a small x to pop up in the top right corner when I hover this element so that I can delete the element itself. I have a feel a button is not the way to go here, but I do need an element with an onClick event.
Any pointers would be much appreciated

Tags:

2

Answers


  1. 0

    You can set an onClick event on any HTML elements. You would probably want to add a separate element with the ‘x’ and listen for a click on there.

    Login or Signup to reply.
  2. 0

    We can certainly have a button element, add a span element inside (to show x), and only show that span on hover with some javascript, and styling it with css:

    var btn = document.querySelector('.btn');
var close = document.querySelector('.close');

btn.addEventListener('mouseover', () => {
  close.style.display = 'block';

});

btn.addEventListener('mouseout', () => {
  close.style.display = 'none';

});

function closeIt(e) {
    btn.style.display = 'none';
}
    body {
  background-color: #0f111d;
}

.btn {
  background-color: #50c4e5;
  padding: 10px;
  width: 400px;
  font-size: 15px;
  text-align: center;
  display: block;
  border-radius: 5px;
  border: 0;
  position: relative;
}

.close {
  cursor: pointer;
  display: none;
  position: absolute;
  top: 20%;
  right: 1%;
  transform: translate(0%, -50%);
}
    <button class="btn" onclick="alert('button clicked')"><span onclick="event.stopPropagation();closeIt()" class="close">&times;</span>https://www.pdga.com/frontpage/feed</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search