Question

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

SignIn

该段位于一个div中。因此，当将鼠标悬停在另一个div上时，是否可以使这个div可见？

Answer 1

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

尽管如此，我希望您能够通过细分以及您要完成的工作来澄清您的具体含义。你想... ...

当客户的视口高度不符合某个值时隐藏 nav-dots ？
在特定DOM 元素上隐藏 nav-dots ，例如<p>或<div>？
当用户滚动超过某个阈值时隐藏 nav-dots ？

要回答第二个场景以及后来关于在将鼠标悬停在另一个上时隐藏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的新手，我试图让这个例子变得简单。这仅适用于使用＆＃39;悬停显示＆＃39;一个元素上的行为和你只使用一个＆＃39; nav-dots＆＃39;此容器内的元素。亲自尝试一下，让我知道它是如何工作的！

元素仅对特定高度可见

1 个答案: