javascript - 将鼠标悬停在改变颜色的图标上

Question

所以我正在用 JavaScript 玩一些东西。我试图让我的 div 在用户将鼠标悬停在其上时改变颜色，然后一旦用户离开它应该返回到原始颜色。这是我的代码。由于某种原因，我的浏览器(chrome)没有显示它，即使一切看起来都正确，但也许有人可以发现我无法发现的东西

var bookEventsInfo = document.getElementById("bookEventsInfo");

bookEventsInfo.addEventListener("mousemove", function() {
  sources.syle.color = "green";
})
bookEventsInfo.addEventListener("mouseleave", function(){
   bookEventsInfo.syle.color = "grey";
})

<div id="bookEventsInfo">
  <i class="fas fa-book-open fa-5x"></i>
  <hr>
  <p>Book Events allows the user<br>to select and manage bookings<br>of certain events to choose from</p>


  <!-- <p>Book Events form will allow you to<br>Select specifc events from a list<br>and can make bookings</p> -->
</div>

Answer 1

您可以直接使用 CSS 来实现此目的。在您的样式中添加如下内容:

.element:hover {
    background: red;
}