将悬停jquery代码转换为javascript

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="hover-element">悬停效果</div>

var element = document.getElementById("hover-element");

element.addEventListener("mouseover", function() {
  // 鼠标悬停时执行的代码
});

element.addEventListener("mouseout", function() {
  // 鼠标离开时执行的代码
});

element.addEventListener("mouseover", function() {
  // 鼠标悬停时执行的代码
  element.style.backgroundColor = "red";
});

element.addEventListener("mouseout", function() {
  // 鼠标离开时执行的代码
  element.style.backgroundColor = "transparent";
});