javascript - Hover and toggle in basic javascript

Question

I have the following JavaScript code for a simple hover which uses JQuery:

$('.product_img_link').hover(function(){
  $(this).prev('.hoverProduct').show();
},function(){
  $(this).prev('.hoverProduct').hide();
});

(finds the previous div with class hoverProduct, and displays it on hover and hides it on mouse out).

How can I write this snippet without JQuery, using only plain JavaScript?

Answer 1

このようなもの：

var links = document.querySelectorAll('.product_img_link');

[].forEach.call(links, function(link) {
  var prev = link.previousSibling;
  link.addEventListener('mouseover', function() {
    prev.style.display == 'block';
  });
  link.addEventListener('mouseout', function() {
    prev.style.display == 'none';
  });
});

セレクターを使用したjQueryでは、セレクターに一致する場合にのみprev前の要素を取得します。プレーンな JS で同じ動作が必要な場合は、次のようにテストできます。

...
var prev = link.previousSibling;
var hasClass = /\bhoverProduct\b/.test(prev.className);

if (hasClass) {
  // events
}
...