在悬停时显示特定的非嵌套 div

Question

我打算将两组 div 用作菜单。我做了一些 Jquery 代码来显示它们，它适用于一个，但如果我想创建更多，那么我会切换所有 div。我想也许添加类似data-index ="0" 的东西来关联它们会是一个好方法，但似乎无法让它发挥作用

menuState = {
  menuOpen: false,
  timer: false
}
$('.main, .sub').on('mouseover', () => {
  clearInterval(menuState.timer)
  if (menuState.menuOpen) { return }
  $('.sub').show();
  menuState.menuOpen = true
})

$('.main, .sub').on('mouseout', () => {
  menuState.timer = setTimeout( () => {
    menuState.menuOpen = false
    $('.sub').hide()
  }, 300)
})

body {
  padding: 2rem;
  font-family: Open Sans;
  font-weight: 100;
}

.thing {
  border-radius: 5px;
  padding: 1rem 2rem;
  font-size: 2rem;
  margin: 1rem;
  color: white;
  cursor: pointer;
}

.pink {
  background: pink;
}

.blue {
  background: lightblue;
}

.sub {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thing pink main" data-index ="0">Hover</div>
<div class="thing pink sub" data-index ="0">Show</div>

<div class="thing blue main" data-index ="1">Hover</div>
<div class="thing blue sub"  data-index ="1">Show</div>

请确定，预期的行为是，如果我将鼠标悬停在蓝色 div 上，则会显示另一个蓝色 div。如果我将鼠标悬停在粉色 div 上，则会显示一个粉色 div。

提前致谢！

编辑

我真的需要保留下拉菜单，因为这是一个简化的菜单，并且在切换的 div 上会有用户信息。

Answer 1

这里不需要 JS，因为您可以在单个 CSS 规则中实现所有逻辑：

.main:hover + .sub {
  display: block;
}

body {
  padding: 2rem;
  font-family: Open Sans;
  font-weight: 100;
}

.thing {
  border-radius: 5px;
  padding: 1rem 2rem;
  font-size: 2rem;
  margin: 1rem;
  color: white;
  cursor: pointer;
}

.pink {
  background: pink;
}

.blue {
  background: lightblue;
}

.sub {
  display: none;
}

.main:hover + .sub {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thing pink main" data-index="0">Hover</div>
<div class="thing pink sub" data-index="0">Show</div>

<div class="thing blue main" data-index="1">Hover</div>
<div class="thing blue sub" data-index="1">Show</div>

<div class="thing pink main" data-index="0">Hover</div>
<div class="thing pink sub" data-index="0">Show</div>

Answer 2

$('.main, .sub').on('mouseover', function() {
  clearInterval(menuState.timer)
  if (menuState.menuOpen) { return }
  if ($(this).hasClass('.sub')) {
    $(this).show();
  } else {
    $('.sub[data-index="'+$(this).data('index')+'"]').show();
  }
  menuState.menuOpen = true
})

由于您没有为我们提供 .sub 和 .main 类的 html，我无法给出完美的答案，但您正在寻找我们使用 this 变量的内容。不过 CSS 是比使用 js 更好的选择