点击A后销毁A，在同位置创建B，B按钮会处于hover状态

**点击A后销毁A，在同位置创建B**

在某些情况下，我们可能需要在页面中实现一个功能：点击一个元素（例如按钮A）后，销毁这个元素，然后在同一位置创建另一个元素（例如按钮B）。同时，这个新创建的元素应该处于hover状态。

**HTML结构**

html<!-- HTML结构 -->
<div id="container">
 <button id="btn-a">点击我</button>
 <!-- 其他元素 -->
</div>

javascript// 获取按钮A的DOM元素const btnA = document.getElementById('btn-a');

// 绑定点击事件btnA.addEventListener('click', function() {
 // 销毁按钮A btnA.remove();

 // 创建新按钮B const btnB = document.createElement('button');
 btnB.textContent = '新按钮';
 btnB.style.position = 'absolute'; // 将新按钮的位置设置为绝对定位 btnB.style.top = btnA.offsetTop + 'px'; // 将新按钮的top属性设置为原按钮A的top值 btnB.style.left = btnA.offsetLeft + 'px'; // 将新按钮的left属性设置为原按钮A的left值 // 添加事件监听器，监听页面是否鼠标悬浮在新按钮上 btnB.addEventListener('mouseover', function() {
 // 如果鼠标悬浮在新按钮上，则将其样式设置为hover状态 btnB.style.background = 'red';
 btnB.style.color = 'white';
 });

 // 将新按钮添加到原按钮A的父元素中 document.getElementById('container').appendChild(btnB);
});

css/* CSS样式 */
#btn-a:hover {
 background: red;
 color: white;
}

button {
 position: relative; /* 将按钮的位置设置为相对定位 */
}