Do something to element with corresponding data-attribute on hover

JavaScript
1

Markup is similair to:

<ul>
<li data-id="1"></li>
<li data-id="2"></li>
</ul>

<section>
<article data-id="1"></article>
<article data-id="2"></article>
</section>

How could I show/hide corresponding article when hovering the list items? I can’t put the articles inside the li’s.

2

Using jQuery:

$('li[data-id]').hover(function() {
    $('article[data-id=' + $(this).attr('data-id') + ']').show();
}, function() {
    $('article[data-id=' + $(this).attr('data-id') + ']').hide();
});

fiddle

1 Like
3

perfect, thanks!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.