Why is it that sometimes the hover property in CSS doesn't react? Example

Source: Internet
Author: User
When we use CSS in the hover, occasionally encounter invalid situation, this is really very anxious. So what is the cause of the failure? This article will give you a summary of the reasons for hover in CSS.

The use of hover in CSS is illustrated by the following code examples:

<style type= "Text/css" >.one {margin:0 auto;width:400px;height:300px;background: #ced05d;}. {margin:0 auto;width:100px;height:100px;background: #5a5aea;}. Three {margin:0 auto;width:200px;height:100px;background: #4b9c49;}. Four {margin:0 auto;width:300px;height:100px;background: #7b4141;}. one:hover {background: #da56d0;} Usage test for hover in </style><body>

Invalid reason summary:

First, the above code test found that the mouse passed class as one when the background is unchanged, and through the other div background color changes, explained: hover before adding a space, itself will not have: hover effect, and descendants of the elements will have: hover effect.

Second, only the descendant elements and sibling elements (immediately after the element of the sibling element) have effect, the other: hover will fail

Third, the class name is wrong;

Iv.: Hover is placed in: Link and: Visited before it is invalid;

Note:

: The hover selector is used to select the element on which the mouse pointer floats.

Tip:: The hover selector is available for all elements, not just links.

Tip: The link selector sets a style for links to pages that are not visited: the visited selector is used to set a link to a page that has been visited: the active selector is used for the active link. In the CSS definition,: Hover must be located after link and: visited (if present) before the style can take effect.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.