What determines the :hover active area - is it the generated box by the element itself, or does it depend on the HTML

nav {
  background: #eee;
  position: relative;
  a {
    display: inline-block;
    padding: 10px;
  }
  > nav {
    position: absolute;
    opacity: 0;
    width: 100%;
    a {
      display: block;
    }
  }
}
.main:hover > .sub {
  opacity: 1;
}
<nav class="main">
  <a href="#">Menu 1</a>
  <a href="#">Menu 2</a>
  <a href="#">Menu 3</a>
  <nav class="sub">
    <a href="#">Menu 2-1</a>
    <a href="#">Menu 2-2</a>
  </nav>
</nav>

After analyzing the code snippets, it is evident that nav.sub behaves as an absolute element outside of nav.main's box model. However, when hovering over nav.sub, it becomes visible.

This raises the question of what determines the :hover active area—is it based on the element's box generated by HTML structure? Unfortunately, I have been unable to find any references or specifications regarding this matter.

htmlcsscss-selectorshover

Answer №1

The definition of :hover is not explicitly stated in Selectors itself. Some host languages may provide their own definitions, like HTML does. Referencing resources from W3C HTML5 and WHATWG HTML (emphasis added):

The :hover pseudo-class is defined to match an element "while the user designates an element with a pointing device". When defining the behavior of the :hover pseudo-class, an HTML user agent is required to consider an element as one that the user designates if it meets certain criteria:

  • An element that the user selects using a pointing device.

  • An element that contains a descendant selected by the user using a pointing device.

  • An element that serves as the labeled control of a label element currently matching :hover.

This implies that any HTML element matching :has(:hover) also matches :hover. This relationship holds true regardless of the layout of the ancestor and its :hover descendant.

In a specific example scenario, selecting either .main or .sub will cause .main to match :hover, subsequently leading to .sub matching the complex selector .main:hover > .sub.

Answer №2

Functioning is determined by the css property used. The current opacity value is 1, while previously it was set at 0. When the opacity is set to 0, the element exists on the page but is not visible to the user. For more information on opacity, feel free to search on Google.

Answer №3

.main{
background: gray;
}
.sub{
display: none;
}
.main:hover > .sub{
display: block;
}
 <nav class="main">
  <a href="#">Menu 1</a>
  <a href="#">Menu 2</a>
  <a href="#">Menu 3</a>
  <nav class="sub">
    <a href="#">Menu 2-1</a>
    <a href="#">Menu 2-2</a>
  </nav>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Display Full Lightbox Image on both Tall and Short Height Browsers

Hey there! I'm showcasing my portfolio using lightbox, but I've run into a little issue. When the browser height is full, everything looks great - you can see the entire image, along with the paragraph and buttons. https://i.stack.imgur.com/UCJG ...

htmlcsssasslightbox

Two dropdown menus opening simultaneously

Recently, I encountered an issue while using a dropdown menu within a div. Even though it was functioning properly, I noticed that when I included two dropdown menus on the same page, clicking on the first one would cause both the first and second dropdown ...

htmlcssdrop-down-menubootstrap-4

Alter the HTML tag once the text is encompassed within it

Can you configure your HTML code to display (B) when the text in (A) is wrapped? If it's not wrapped, then just display (A) (A) <div> <span>abcdefgabcdefgabcdefg</span> <span>abcdefgabcdefgabcdefg</span> ...

javascripthtmlcssreactjs

Tips for applying CSS styles to the active page link

Check out the code below: Is there a way to assign a specific class to the current page link so that the mouse cursor will display as default rather than changing to a hand icon? I'm looking for a solution where I can apply a class to the active lis ...

javascriptjqueryhtmlcss

Toggling with Jquery when an image is clicked

I'm trying to wrap my head around the functionality of jquery toggle. My goal is to toggle to the next anchor element with the class plr-anchor when an image with the class go_down is clicked. The information is being populated using maps. Javascript ...

javascriptjqueryhtmlreactjstoggle

I utilized the "data-target" attribute to ensure the active link retains its style. Is there a way to preserve the style when navigating away from an active link?

Can someone assist me with this re-upload? I need help tweaking my code to maintain style when navigating between pages using the "data-target" attribute. Currently, the style is being lost when moving from the original link (e.g., "link/sub01.html") to a ...

javascripthtmljquerycss

Retrieve the value of a dynamically generated input element within a form object

I'm trying to figure out how to reference a dynamic 'name' of an input element in a form. Can anyone help? Here's an example using HTML: <form> <input type="text" name="qty1" value="input1" /> <input type="text ...

javascripthtmlforms

Form Validator unable to properly validate option selection and checkbox

I am encountering an issue with this script. I require the Form Validator, as programmed at the bottom, to first verify if the radio button is selected and then proceed to request a time from the specific radio button's dropdown menu. It appears that ...

javascripthtmlforms

I'm having trouble retrieving and rendering data in HTML using AngularJS and Spring

After fetching the data, I am unable to see it in the HTML code. The web browser console displays the JSON data but it is not visible in the HTML code. Here is my AngularJS code: $scope.refresh = function(){ fetchData(); }; $scope.fetchData = functio ...

htmlangularjsspringfrontend

Tips for positioning the cursor at the end of text within a contenteditable div tag

There seems to be a multitude of solutions available here How can one position the cursor at the end of text within an input or textbox element tag? Utilizing JavaScript to place the cursor at the end of text in a text input element Achieving the jQuery ...

javascriptjqueryhtml

Empty HTML fieldset

For a blog article I'm working on, I'd like to include a "Note" box that resembles a <fieldset> with a <legend> <fieldset> <legend>Note</legend> Please take note of this. </fieldset> (check out http:/ ...

html

Implementing a CSS3 rotation around the center of a group following prior local rotations around the center of each individual item

My dilemma lies within a div containing numerous draggable items. When I select and group multiple items, rotating them together as a group works seamlessly – that is, unless the individual items had prior rotations applied to them. The issue arises whe ...

cssrotationcss-transforms

Unable to showcase JavaScript outcome on the HTML page

I have been working on creating a JavaScript function to calculate the Highest Common Factor (HCF). While testing my code in the VS Code console, the correct value is displayed. However, I'm encountering an issue when trying to display the result on t ...

javascripthtml

Leverage HTML and CSS to style an email template within the Code Igniter framework

How can I send a visually appealing email using Codeigniter? Currently, my controller code is sending HTML code instead of rendering the content properly. Here is what I have so far: public function test_email() { $message = $this-> ...

htmlemailcodeigniter

Adjust your path by 45 degrees

I'm facing a challenge in getting all three of my images to fly off the screen in different 45-degree directions. Currently, they are all flying off the screen to the left, but I would prefer them to go in 45-degree angles. I've shared the CSS, H ...

javascripthtmlcss

Having trouble getting the `nth-of-type` and `nth-child` selectors in CSS to function

I am attempting to apply a green color for the first nth child flag element <div id="axis"> <div class="super"></div> <div class="flag">flag 1</div><!-- I want this text to be green--> <div class="supe ...

htmlcsscss-selectors

Transferring information and storing it in a textbox

I have a homepage that features a popup window. <textarea class="form-control item"></textarea> <button type="button" class="btn btn-primary" name="name">Send</button> Additionally, there is a secondary page at (/conclusion/main) ...

javascriptjqueryhtmlajax

Is there a method to identify if the dark theme is enabled in iBooks while working within an EPUB file?

Is there a specific code or feature that iBooks uses to enable the customization of certain sections within the book, such as changing to lighter colors when night mode is on? ...

htmlpublishingepubibooks

Tips for correctly center aligning a Div element

I'm facing some challenges with properly centering my website It appears to be centered when I zoom out. However, for users who don't zoom out, it looks misplaced. Do you have any suggestions? The site was built using all AP divs and even with a ...

htmlcss

What is the proper technique for looping through an array with an unknown level of nesting?

As I delve into the world of destructuring, there's a specific challenge that has arisen. I'm struggling with how to dynamically display an array of objects depending on their contents... const items={ title: 'Production', subTasks: ...

javascripthtmlreactjs