js设置li的鼠标移动

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

#myList li {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  cursor: pointer; /* 改变鼠标指针为手形 */
}

#myList li:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
  color: #007bff; /* 文字颜色变化 */
}

document.addEventListener('DOMContentLoaded', function() {
  var listItems = document.querySelectorAll('#myList li');
  
  listItems.forEach(function(item) {
    item.addEventListener('mouseover', function() {
      this.style.backgroundColor = '#f0f0f0';
      this.style.color = '#007bff';
    });
    
    item.addEventListener('mouseout', function() {
      this.style.backgroundColor = '';
      this.style.color = '';
    });
  });
});