查找懸停的當前節點和上一個節點

Question

我有一個HTML列表，其中包含帶有鏈接的子級。 我想找到當前懸停的元素，以及以前懸停的元素。 （不是當前懸停的那個的先前的同級，而是一直懸停到當前的那個項目）。

謝謝

Answer 1

您需要在鼠標離開時存儲該元素，然后在鼠標上輸入以檢查它是什么。 例如：

var previous;

$('div').on('mouseleave',function(event){
    previous = $(this);
});

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

jsFiddle

Answer 2

純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> 

Answer 3

將其存儲在全局變量中：

 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>