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

Posted 2023-05-08

【中文标题】在悬停时显示特定的非嵌套 div

【英文标题】：Show a specific non-nested div on hover

【发布时间】：2018-01-26 02:17:07

【问题描述】：

我打算将两组 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 上会有用户信息。

【问题讨论】：

为什么是 js 而不是 css？

我简化了示例，但在实际应用程序中是一个带有不同链接的导航和一个包含所有内容的 div，用于在导航之外的下拉菜单。我认为 JS 更适合这种方法。

看看@Rory McCrossan 的回答

【参考方案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>

【讨论】：

如果您离开蓝色悬停区域，下拉菜单会消失。因为这是导航，所以我需要它留下来。

这是一个相当大的逻辑变化，与你原来的问题不同——即使你使用了 JS 代码来做到这一点

【参考方案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 更好的选择

【讨论】：

sn-p中有一个HTML

啊，我明白了，我的错误，我会改正的

我还进行了编辑以解释预期的行为。我使用 JS 是因为我需要保留带有子类的 div，因为它会为用户提供内容。

这对你有用吗？因为对我来说它没有，也许我做错了什么？ Here 是我对你的代码的尝试

修复了，我复制粘贴原函数时没注意到你破坏的 es6 语法