如何在将元素移出一定范围后保持悬停属性处于活动状态？

在将元素移出一定范围后保持悬停属性处于活动状态，可以通过以下步骤实现：

使用CSS的position属性将元素定位为fixed或sticky，以使其在滚动时保持在屏幕上的固定位置。
监听滚动事件，并在滚动时检查元素的位置。
当元素的位置超出指定范围时，通过修改元素的样式或添加/移除CSS类来改变其悬停属性。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  height: 2000px; /* 设置一个足够长的容器，以便产生滚动条 */
  position: relative;
}

.element {
  position: sticky;
  top: 50px; /* 设置元素的初始位置 */
  background-color: #f1f1f1;
  padding: 20px;
  margin-bottom: 20px;
}

.active {
  background-color: #ff0000; /* 活动状态的样式 */
}
</style>
</head>
<body>
<div class="container">
  <div class="element">元素1</div>
  <div class="element">元素2</div>
  <div class="element">元素3</div>
</div>

<script>
window.addEventListener('scroll', function() {
  var elements = document.getElementsByClassName('element');
  var container = document.getElementsByClassName('container')[0];
  var containerRect = container.getBoundingClientRect();

  for (var i = 0; i < elements.length; i++) {
    var elementRect = elements[i].getBoundingClientRect();

    if (elementRect.top < containerRect.top || elementRect.bottom > containerRect.bottom) {
      elements[i].classList.remove('active');
    } else {
      elements[i].classList.add('active');
    }
  }
});
</script>
</body>
</html>

在上述示例中，我们使用了CSS的position: sticky属性将元素定位为粘性定位，然后通过监听滚动事件来检查元素的位置。如果元素的位置超出了容器的范围，我们就移除元素的活动状态样式（active类），否则就添加活动状态样式。这样，当元素被滚动出一定范围后，它的悬停属性就会失效。