css 需要一个“按钮”类型的元素与x在右上角，让我删除元素本身,我在寻找什么？

svmlkihl 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(194)

我知道这个问题听起来很奇怪。也许按钮不是我要找的元素。我想做的是有一个元素，看起来像我在这里：

现在，这是一个技术上的按钮。然而，我希望当我悬停这个元素时，一个小的x会弹出在右上角，这样我就可以删除元素本身。我有一种感觉，按钮不是这里的方式，但我确实需要一个带有onClick事件的元素。
任何指示将不胜感激

来源：https://stackoverflow.com/questions/75332517/need-a-button-type-element-with-an-x-at-the-top-right-that-lets-me-delete-the

2条答案

按热度按时间

9q78igpj1#

我们当然可以有一个button元素，在里面添加一个span元素（用来显示x），并且只在悬停时用一些javascript显示span，然后用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>

赞(0）回复(0）举报 2023-02-06

fxnxkyjh2#

你可以在任何HTML元素上设置一个onClick事件，你可能会想添加一个单独的元素，并在那里监听点击。

赞(0）回复(0）举报 2023-02-06