查找当前和上一个悬停节点

Find current and previous node hovered

本文关键字：悬停 节点 上一个 查找      更新时间：2023-09-26

我有一个html列表，其中包含带有链接的子列表。我想找到当前被悬停的元素，以及之前被悬停的元素。(不是当前悬停项的前一个兄弟项，只是悬停到当前项的项)。

谢谢

您需要在鼠标离开元素时存储该元素，并在鼠标输入时检查它是什么。例如:

var previous;
$('div').on('mouseleave',function(event){
    previous = $(this);
});
$('div').on("mouseenter", function(event){
    console.log($(this).text(), previous.text());
})

jsFiddle

将其存储在全局变量中:

var hoveredElement; // We'll store our "previous" data here
// Add a hover listener to the UL, then delegate to the anchors 
document.querySelector('ul').addEventListener('mouseover', function(e) {
  if (e.target && e.target.matches('a')) {
    
    // If we have a previous hovered element, add it
    if (hoveredElement) {
      document.querySelector('.previous').textContent = hoveredElement
    }
    // Set the current hovered and the "new" last hovered elements to the currently hovered element
    document.querySelector('.current').textContent = hoveredElement = e.target.textContent
  }
});
<ul>
  <li>
    <a href="#">Item 1</a>
  </li>
  <li>
    <a href="#">Item 2</a>
  </li>
  <li>
    <a href="#">Item 3</a>
  </li>
</ul>
<hr />
<p>Current: <span class="current"></span></p>
<p>Previous: <span class="previous"></span></p>

纯JavaScript 

var previouslyHovered
var currentlyHovered
var previousBox = document.querySelector('.previouslyHovered')
var currentBox = document.querySelector('.currentlyHovered')
var items = document.querySelectorAll('li')
items.forEach(item => item.addEventListener('mouseover', function() {
  previouslyHovered = currentlyHovered
  previousBox.textContent = previouslyHovered
    ?previouslyHovered.textContent
    :previousBox.textContent
  
  currentlyHovered = this
  currentBox.textContent = currentlyHovered.textContent
}))
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
<div>previous
<span class="previouslyHovered">n/a</span>
</div>
<div>current
<span class="currentlyHovered">n/a</span>
</div>

相关文章：