Найти текущий и предыдущий узел зависает

Question

У меня есть список html, содержащий детей со ссылками. Я хочу найти текущий элемент, который завис, а также ранее зависающий. (Не предыдущий родной брат того, кто в настоящее время завис, только элемент, который зависал до текущего).

Благодаря

Answer 1

Хранить его в глобальной переменной:

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>

Answer 2

Вам нужно будет хранить элемент, когда мышь покидает его, и на мыши войти проверить, что это такое. Например:

var previous; 

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

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

jsFiddle

Answer 3

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