Как при наведении на один блок показывать другой (only js)?

Question

[Денис Т]

Вот пример:
codepen.io/slow_D/pen/KrxaEQ

Необходимо при наведении на один блок показывать соответствующий ему другой блок (при наведении на синий блок должен показываться первый div во второй li).
Решение должно быть гибкое, ибо блоков что в одной, что во второй li может быть много. Прошу помощи, не хватает навыков для реализации универсального решения.

Comments

[Алексей]

Атрибуты добавлять можно?)

[Денис Т]

Алексей: да

Answer 1

[Алексей]

На jQuery что то вроде этого можно сделать:

<ul>
  <li>
    <div class="p1 pe" data-block="pt1"></div>
    <div class="p2 pe" data-block="pt2"></div>
  </li>
  <li>
    <div class="pt pt1"></div>
    <div class="pt pt2"></div>
  </li>
</ul>

$(function(){
  $('.pe').on('mouseenter', function(){
    var block = $(this).data('block');
    $('.'+block).fadeTo(200,1);
  });
  $('.pe').on('mouseleave', function(){
    $('.pt').fadeTo(200,0);
  });
});

codepen.io/AmateR/pen/yJxrVR

Comments

[Денис Т]

спасибо за ответ

[hronospva]

Альтернативный вариант (на одну функцию меньше)

$('.pe').hover(function() {
var block = $(this).data('block');
$('.' + block).fadeTo(200, 1);
}, function() {
var block = $(this).data('block');
$('.' + block).fadeTo(200, 0);
})

[RushV]

Здравствуйте!
А можно сделать так, что бы при наведении на блок появлялась линии типа вот такого?

[Денис Т]

RushV, конечно можно. Какая у вас задача стоит?

[RushV]

Ну задача такая что бы навести на блок с наведённого блока появлялись линии
как показано на картинке выше.

Answer 2

[Cannabiscat]

Что-нибудь типа такого?

document.getElementsByClassName('p1')[0].onmouseover = function() {
  document.getElementsByClassName('pt1')[0].style.opacity = 1;
}
document.getElementsByClassName('p1')[0].onmouseout = function() {
  document.getElementsByClassName('pt1')[0].style.opacity = 0;
}

с другими классами по такому же сценарию поступить. Честно говоря, не совсем понятен требующийся результат.