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.