鼠标悬停JavaScript创建的按钮时光标未变为pointer的问题

我通过JavaScript创建了一个按钮，设置了#delbook:hover {cursor: pointer !important;}的CSS样式，但鼠标悬停时光标没有切换成pointer。已经移除其他CSS属性排查冲突，问题依然存在，求解决办法。

相关代码 #

JavaScript代码 #

let deleteBtn=document.createElement("button");
deleteBtn.id="delbook";
deleteBtn.textContent="X"

CSS代码 #

#delbook {
  grid-column: 5/6;
  grid-row: 1/2;
  border-radius: 5px;
  border: none;
  width: 60%;
  height: 100%;
  font-size: 20px;
  justify-self: center;
}

#delbook:hover {
  cursor: pointer !important;
}

HTML结构 #

<div class="book_card" data-book="0">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <title>book-open-blank-variant</title>
    <path d="M21,5C19.89,4.65 18.67,4.5 17.5,4.5C15.55,4.5 13.45,4.9 12,6C10.55,4.9 8.45,4.5 6.5,4.5C4.55,4.5 2.45,4.9 1,6V20.65C1,20.9 1.25,21.15 1.5,21.15C1.6,21.15 1.65,21.1 1.75,21.1C3.1,20.45 5.05,20 6.5,20C8.45,20 10.55,20.4 12,21.5C13.35,20.65 15.8,20 17.5,20C19.15,20 20.85,20.3 22.25,21.05C22.35,21.1 22.4,21.1 22.5,21.1C22.75,21.1 23,20.85 23,20.6V6C22.4,5.55 21.75,5.25 21,5M21,18.5C19.9,18.15 18.7,18 17.5,18C15.8,18 13.35,18.65 12,19.5V8C13.35,7.15 15.8,6.5 17.5,6.5C18.7,6.5 19.9,6.65 21,7V18.5Z"></path>
  </svg>
  <p id="card_title">Harry Potter</p>
  <p id="card_author">Rowling</p>
  <p id="card_pages">3</p>
  <p>pages</p>
  <p>Read?</p>
  <button id="delbook">X</button>
</div>

问题排查与解决方法 #

1. 确保按钮插入DOM树
   你的JS代码仅创建了按钮元素，但未将其添加到DOM中。CSS无法匹配不在DOM里的元素，因此需要调用插入方法：

   // 示例：将按钮插入到.book_card容器内
   const targetContainer = document.querySelector('.book_card');
   targetContainer.appendChild(deleteBtn);
   

2. 解决重复ID冲突
   HTML结构中已存在一个id="delbook"的按钮，JS又创建了同名ID元素。ID在文档中必须唯一，重复会导致CSS选择器匹配混乱。

   • 方案：要么删除HTML中静态的#delbook按钮，要么给动态创建的按钮设置唯一ID（如delbook-0），更推荐改用类选择器复用样式。

3. 改用类选择器优化样式
   动态元素用类选择器更灵活，避免ID冲突：

   • JS修改：

     let deleteBtn=document.createElement("button");
     deleteBtn.classList.add('del-book');
     deleteBtn.textContent="X"
     

   • CSS修改：

     .del-book {
       grid-column: 5/6;
       grid-row: 1/2;
       border-radius: 5px;
       border: none;
       width: 60%;
       height: 100%;
       font-size: 20px;
       justify-self: center;
       cursor: pointer; /* 直接在基础样式设置，hover时自动生效 */
     }
     

4. 检查元素是否被遮挡
   若按钮已在DOM但hover无效，可能被其他元素覆盖。可通过浏览器开发者工具查看元素层级，或添加以下样式测试：

   #delbook {
     /* 其他样式 */
     z-index: 999;
     pointer-events: auto;
   }
   

内容的提问来源于stack exchange，提问作者Eligio Cristantielli