我無法理解為什么光標在懸停通過Javascript創(chuàng)建的按鈕時不會變成指針。

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

#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>
  <button id="delbook">X</button>
</div>

在JavaScript中動態(tài)創(chuàng)建一個按鈕元素后，必須將按鈕附加到DOM中已經(jīng)存在的HTML元素上。這里我將按鈕附加到html主體:

const btn = document.createElement('button');
btn.textContent = "Hover me";
btn.id = "delbook";

document.body.appendChild(btn); // or append button to some other container

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