为什么鼠标悬停在按钮上时光标没有改变？

Question

我不明白为什么鼠标悬停在通过 Javascript 创建的按钮时，光标不会变成指针。 这就是我在 JS 中创建按钮的方式：

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

这是链接到它的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>

我试图从 CSS 中删除颜色和其他属性以检查是否存在某种冲突但没有。 谁能帮我解决这个问题？

谢谢

Answer 1

一切都按我的预期进行。看起来您网站上的其他内容会影响光标。

再次检查：箭头光标名称为

default

，手形光标名称为

pointer

.

你期待看到什么？

const newDiv = document.querySelector("#newdiv");
let deleteBtn=document.createElement("button");
        deleteBtn.id="delbook";
        deleteBtn.textContent="X"
        newDiv.appendChild(deleteBtn);

#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;
}

<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>
<div id="newdiv"></div>