Селектор data атрибут?

Question

[Максим]

Есть n-ое количество таких блоков, минимум 20 штук, и для каждого отдельно описывать hover не правильно,
вопрос следующий. Как при наведении на month_block показывать соответствующий ему main_calendar ?

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

... ... ...
и так далее

Comments

[Максим]

вот часть,
$('.main_calendar').hover(function() {
$('.month_block').slideToggle(200);
});
При наведении на один из main_calendar открываются все month_block,
так вопрос следующий, как мне в коде различать их ? Отдельно писать для каждого нельзя так-как ,
это все идет с базы, и их количество меняется
joxi.ru/V2VGLb3F3bxwAv

Answer 1

[Иван Антонов]

jsfiddle.net/u6wyycqg

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

Comments

[Максим]

Дай Вам Бог здоровья, 100 лет жизни, благодарочка)

[Иван Антонов]

Максим: На здоровье :)

Answer 2

[Дмитрий Королёв]

CSS

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

Второй селектор (.main_calendar:hover) добавлен для хорошего UX, можно его не использовать, разумеется.

JS:

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

Comments

[Максим]

Вы наверное вопрос не поняли,
вот часть,
$('.main_calendar').hover(function() {
$('.month_block').slideToggle(200);
});
При наведении на один из main_calendar открываются все month_block,
так вопрос следующий, как мне в коде различать их ? Отдельно писать для каждого нельзя так-как ,
это все идет с базы, и их количество меняется

[Дмитрий Королёв]

Максим: у вас нигде не написано. что нужно в JS это делать, а не CSS =) Я обновил ответ.

[Максим]

Благодарю за помощь!)

Answer 3

[Дмитрий Пыркин]

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

Comments

[Aleksandr]

И что сделает ваш код?)

[Дмитрий Пыркин]

А простите плохо посмотрел на закрытие divы вместо children next. А так при наведении мыши на блок покажет следующий элемент