How to achieve the effect of CSS hover floating window and how to solve the problem of mistriggering hover event?

CSS hover floating window effect and error triggering problem solution

This article introduces a CSS-implemented hover floating window effect and solves its common mistriggering problems. This effect is similar to the top navigation bar of some websites: When the mouse hovers over a specific element, a floating window appears next to it.

We explain based on the following HTML structure and CSS style: In the code, each .box element contains a text and a .air-bubble element for displaying floating windows. The original CSS style used .box:hover to trigger the floating window display, .box:hover > .air-bubble controls the visibility and transparency of the floating window.

However, a problem arises: even if .air-bubble element is set to invisibility ( visibility: none ), hovering over its area will still trigger the hover event of .box , causing the floating window to appear unexpectedly. The browser will also issue a "invalid property value: visibility none" warning.

The fundamental reason is that hover event acts on .box element, and as a child .air-bubble , its area also belongs to the hover area of .box . Therefore, even if .air-bubble is not visible, the mouse will still trigger .box:hover in its area, thus displaying the floating window.

The solution is to bind hover event to a specific child element within the .box element. The modified CSS code is as follows:

 .box > span:hover {
  background-color: var(--primary);
  color: var(--white);
}

.box > span:hover .air-bubble {
  opacity: 1;
  visibility: visible;
}

By binding hover event to the span element (assuming your text is located<span></span> In the tag), we make sure that the floating window display will be triggered only if the mouse is hovering over the span element. The selector ensures that only the .air-bubble element that follows the span element will be affected. This effectively avoids the problem of triggering hover events in .air-bubble invisible area. The "invalid property value: visibility none" warning usually disappears with it, as it is caused by a wrong hover event binding.

The above is the detailed content of How to achieve the effect of CSS hover floating window and how to solve the problem of mistriggering hover event?. For more information, please follow other related articles on the PHP Chinese website!