Selector data attribute?

Question

JavaScript

There are n-th number of such blocks, at least 20 pieces, and it is not correct to describe hover for each separately,
the question is the following. How can I show the corresponding main_calendar when hovering over month_block ?

<div class="month_block" data-idboard="id_1"> </div>
       <div class="main_calendar" data-idboard="id_1"></div>

 <div class="month_block" data-idboard="id_2"> </div>
       <div class="main_calendar" data-idboard="id_2"></div>

 <div class="month_block" data-idboard="id_3"> </div>
       <div class="main_calendar" data-idboard="id_3"></div>

... ... ...
and so on

Answer 1

jsfiddle.net/u6wyycqg

$('.month_block').hover(function() {
    var idboard = $(this).attr('data-idboard');
    $('.main_calendar[data-idboard="' + idboard +'"]').slideToggle(200);
});

Answer 2

css

.month_block:hover + .main_calendar,
.main_calendar:hover {
    display: block;
}

The second selector (.main_calendar:hover) is added for good UX, you can not use it, of course.
JS:

$('.main_calendar').hover(function() {
    var idboard = $(this).data('idboard');
    $('[data-idboard="' + idboard + '"]').slideToggle(200);
});

Answer 3

$('.month_block').mouseover(function(){
$(this).children().show()
})