Home > Web Front-end > Front-end Q&A > What to do if css hover fails

What to do if css hover fails

藏色散人
Release: 2023-01-04 09:36:07
Original
4104 people have browsed it

css Solution to hover failure: 1. Cancel the space between selector hovers; 2. Modify the order of "active, visited, hover, link"; 3. Modify the writing method to "a:hover.b {}"; 4. Cancel the inline style of the hover element.

What to do if css hover fails

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

About css: hover failure problem

Reference:

  • About hover failure problem

*********************************I am the dividing line****************** ******************************

1. The reasons for Baidu online generally include the following,

The first one is:

There is a space between the selector, : and hover, or the colon is a Chinese symbol;

The second one is:

No Pay attention to the relationship between the effective order of active, visited, hover, and link.

active < hover < visitied / link
Copy after login

This means that active needs to be defined after hover to take effect, and hover needs to be defined after visited and link to take effect. Of course, the premise is that they exist at the same time.

The third method is:

hover will only work with descendant elements and sibling elements.

ps: When hover acts on sibling elements, it is only useful for adjacent sibling elements, and it should be written as a:hover .b{}

The fourth is:

Low-level error.

When I wrote it myself, I found that hover did not take effect, but it definitely did not meet the first three conditions mentioned above.

Finally, I found that because the hover element has an inline style, hover has no effect.

ps: This should be classified as a low-level error.

【Recommended learning: css video tutorial

The above is the detailed content of What to do if css hover fails. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template