元素仅在特定高度可见

Question

我是 HTML、CSS 和 Javascript 的新手。 我有一个元素（导航点），应该只对我页面的特定部分可见。其余的时间我宁愿把它隐藏起来。我尝试使用媒体查询：

@media screen and (min-height:200vh) and (max-height: 600vh)
{
.invisible{
    visibility: visible;
  }
}

段在一个 div 中。那么是否有可能在悬停在另一个 div 上时使这个 div 可见？

Answer 1

首先，在您的媒体查询中使用vh 和vw 是行不通的。根据定义，100vh 是查看您网站的设备视口高度的 100%。这意味着min-height: 200vh 媒体查询仅适用于视口比设备视口本身高 2 倍的设备。没有什么可以比自己高两倍，除非它是 0，所以这个媒体查询永远不会生效。

也就是说，我希望你能澄清你所说的segment究竟是什么意思，以及你想要完成什么。你想...

1. 当客户端的视口 height 不满足特定值时隐藏 nav-dots？
2. 在特定的 DOM 元素上隐藏 nav-dots，例如 <p> 或 <div>?
3. 当用户滚动超过某个阈值时隐藏导航点？

为了回答第二种情况以及您稍后关于在悬停在另一个 div 上时隐藏 div 的问题，我提出了以下解决方案。但是，如果这不是您想要的，我很乐意更新我的答案。

---

HTML：

<div class="container" id="my_segment">
  <div class="nav-dots">
    Navigation dots go here
  </div>
</div>

在这里，我们将my_segment id 分配给了我们想要隐藏nav-dots 的元素。请注意，每个页面只能使用一次唯一的 id。

CSS：

.container {
  display: inline-block;
  background-color: #FFCCAA;
}

.invisible {
  visibility: hidden;
}

JavaScript：

// Find our element
let seg = document.getElementById('my_segment');

// Add a mouseover event handler to our element
seg.addEventListener('mouseover', function() {
  // Find nav-dots inside our element
  let nav_dot_elements = seg.getElementsByClassName('nav-dots');
  // Remove the 'invisible' class
  nav_dot_elements[0].classList.remove('invisible');
});

// Add a mouseout event handler
seg.addEventListener('mouseout', function() {
  // Find nav-dots inside our element
  let nav_dot_elements = seg.getElementsByClassName('nav-dots');
  // Add the 'invisible' class
  nav_dot_elements[0].classList.add('invisible');
});

Codepen demo

由于您是 JS 新手，所以我尽量让这个示例保持简单。这仅适用于您在一个元素上使用“悬停显示”行为并且您仅在此容器内使用一个“导航点”元素。自己尝试一下，然后告诉我它是如何工作的！