Using vh and vw in your media queries is ineffective. The viewport height (100vh) represents 100% of the device's viewing area, making it impossible for a query like min-height: 200vh to apply as nothing can be two times higher than itself.
Could you elaborate on what you mean by "segment" and your specific goal? Are you looking to:
- Hide nav-dots when the client's viewport height is below a certain value?
- Hide nav-dots within a particular DOM element like
<p> or <div>?
- Hide nav-dots once the user scrolls past a set point?
If addressing the second scenario and the query about hiding a div while hovering over another, consider the following solution outlined below. Modifications are welcome if this doesn't align with your intent.
HTML:
<div class="container" id="my_segment">
<div class="nav-dots">
Navigation dots content here
</div>
</div>
Assign the unique ID my_segment to target the segment for hiding nav-dots. Note that IDs should remain distinct per page.
CSS:
.container {
display: inline-block;
background-color: #FFCCAA;
}
.invisible {
visibility: hidden;
}
JavaScript:
// Access our specified element
let seg = document.getElementById('my_segment');
// Include a mouseover event listener
seg.addEventListener('mouseover', function() {
// Locate nav-dots within the segment
let nav_dot_elements = seg.getElementsByClassName('nav-dots');
// Remove 'invisible' styling
nav_dot_elements[0].classList.remove('invisible');
});
// Incorporate mouseout event logic
seg.addEventListener('mouseout', function() {
// Find nav-dots inside section
let nav_dot_elements = seg.getElementsByClassName('nav-dots');
// Apply 'invisible' style
nav_dot_elements[0].classList.add('invisible');
});
Demonstration on Codepen
This JS example is straightforward for beginners. It operates under the premise of hovering over one component to reveal another. For optimal results, ensure only one 'nav-dots' element exists within the container. Test it out and share feedback on its functionality!