When we use hover in CSS, we occasionally encounter invalid situations, which is really worrying. So what exactly caused the failure? This article will summarize the reasons why hover fails in CSS.

The specific code examples for the usage of hover in css are as follows:

  
css中hover的用法测试
 
 
 
 
 
 
 
 
 

Summary of invalid reasons:

1. When testing the above code, it was found that the mouse passed the class The background remains unchanged when one is in one, but the background color of other divs in one changes. This shows that adding a space before :hover will not have the effect of :hover, but the descendant elements will have the effect of :hover.

2. Only descendant elements and sibling elements (sibling elements immediately after the element) have an effect. Others:hover will be invalid

3. The class name is wrong;

4. :hover is also invalid if it is placed before :link and :visited;

Note:

Tip: The :hover selector can be used on all elements, not just links.

Tip: The :link selector sets the style of links pointing to pages that have not been visited, the :visited selector is used to set links to pages that have been visited, and the :active selector is used for active links. In the CSS definition, :hover must come after :link and :visited (if present) for the style to take effect.

The above is the detailed content of Why sometimes there is no response when using the hover attribute in CSS? (example). For more information, please follow other related articles on the PHP Chinese website!