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

所以我正在玩一些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>

最佳答案

您可以为此使用纯CSS。在您的样式中添加如下内容：

.element:hover {
    background: red;
}