如果这个仪表板应用程序现在工作，一些代码行没有注册..对于初学者悬停状态不工作

Question

我正在构建一个仪表板项目（javascript 的新手），出于某种原因，我的一些悬停状态正在工作，有些则没有……我还添加了一个新的事件侦听器来发出警报，只是为了看看它是否在工作，有什么是这也有问题......任何关于这可能是什么的反馈......悬停状态正在按钮而不是用户名上工作..

const userNamesUrl = 'https://jsonplaceholder.typicode.com/users'
const newsUrl =
  'https://api.nytimes.com/svc/topstories/v2/home.json?api-key=9GZM26UeghzD7lATJGQAUfez8uJKRAB8'
const employeeButton = document.getElementById('employee')
const dataButton = document.getElementById('data-button')
const ulUserName = document.getElementById('usernames-list')
const homeButton = document.getElementById('home-button')

async function fetchJsonApiData() {
  const response = await fetch(userNamesUrl)
  const data = await response.json()
  return data
}

async function fetchNewsData() {
  const response = await fetch(newsUrl)
  const newsData = await response.json()
  return newsData
}

employeeButton.addEventListener('click', async (e) => {
  const dialog = document.createElement('dialog')
  //code so usernames do not re-render
  if (ulUserName.children.length > 1) {
    return
  }
  //capturing api data and configuring it into an array
  const data = await fetchJsonApiData()
  const userArray = Array.from(data)
  console.log(userArray)
  userArray.forEach((user) => {
    const userDiv = document.createElement('li')
    userDiv.classList.add('usernames')
    userDiv.innerText = user.name
    ulUserName.appendChild(userDiv)
    //creation of modal pop-up
    userDiv.addEventListener('click', () => {
      document.body.appendChild(dialog)
      dialog.showModal()
      //creating innerText of Modal
      const modalList = document.createElement('ul')
      modalList.classList.add('modal-list')
      const userName = document.createElement('li')
      userName.innerText = 'Name : ' + user.name
      const email = document.createElement('li')
      email.innerText = 'Email : ' + user.email
      const phoneNumber = document.createElement('li')
      phoneNumber.innerText = 'Phone : ' + user.phone
      const address = document.createElement('li')
      address.innerText =
        'Address : ' +
        user.address.street +
        ',' +
        user.address.suite +
        ',' +
        user.address.city +
        ',' +
        user.address.zip
      //appending  modal items to modal-list
      modalList.appendChild(userName)
      modalList.appendChild(email)
      modalList.appendChild(phoneNumber)
      modalList.appendChild(address)
      //adding a class to the modal-List items
      modalList.classList.add('modal-list')
      //append modal-list to dialog element
      dialog.appendChild(modalList)
    })
  })
})

:root {
  --main-color: #154551;
  --secondary-color: #00a1a7;
}

body {
  margin: 0 auto;
  font-size: larger;
  background-color: rgb(255, 255, 255);
  display: grid;
  grid-template-columns: 5% 7.5% 1fr 1fr 1fr 7.5% 5%;
  grid-template-rows: 10% 1fr;
  font-family: 'Times New Roman', Times, serif;
}

.dash-container {
  padding: 300px;
  background-color: rgb(255, 255, 255);
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row: span 3;
  grid-row-start: 2;
  box-shadow: 0px 0px 4px rgb(0, 0, 0);
}

.buttons {
  grid-column-start: 2;
  grid-row-start: 2;
  margin-top: 30px;
  text-align: center;
}

.button {
  max-height: 20px;
  text-align: center;
  border-radius: 5px;
  margin-top: 30px;
}

button-padding {
  padding: 20px;
  background-color: var(--main-color);
  grid-row-start: 2;
  grid-column-start: 2;
}

#logo-image {
  max-width: 30px;
  max-height: 40px;
  grid-row-start: 2;
  grid-column-start: 2;
  margin-top: 7px;
  margin-left: 45px;
}

input {
  grid-column-start: 3;
  grid-row-start: 2;
}

.buttons {
  grid-column-start: 2;
  grid-row-start: 2;
  margin-top: 30px;
  text-align: center;
}
.button {
  max-height: 20px;
  text-align: center;
  border-radius: 5px;
  margin-top: 30px;
}

.button:hover {
  cursor: pointer;
}

.usernames {
  text-align: center;
  margin-top: 20px;
  box-shadow: 0px 0px 2px 1px #000000;
}

.usernames:hover {
  cursor: pointer;
  background-color: rgb(0, 161, 167);
}

ul {
  margin-top: 30px;
  text-align: center;
  font-size: 20px;
  grid-column-start: 4;
  grid-row-start: 2;
  list-style: none;
}

dialog {
  padding: 50px 100px;
  border: none;
  box-shadow: 0 0 0.5px 0.5px black;
}

.modal-list {
  text-align: center;
  font-size: 25px;
}

li:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="dash-container" id="dash-container"></div>
    <button-padding></button-padding>
    <button-Grouping class="buttons">
      <button class="button" type="button" id="home-button">Home</button>
      <button class="button" type="button" id="employee">Employee's</button>
      <button class="button" type="button" id="calendar">Calendar</button>
      <button id="data-button" class="button" type="button">Data</button>
    </button-Grouping>
    <img src="images/diamondlogo.png" alt="" id="logo-image" />
    <ul id="usernames-list"></ul>
    <ul class="news-feed" id="news-feed"></ul>
  </body>
</html>