Home > Developer > Web Develop
: The use of hover, that is, when the mouse pointer moves into the element, the style settings that are made
Example One<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Demo01</title> <style> *{margin:0;padding:0; }ul Li{width:300px;Margin-top:10px;background:#ff0000; }ul Li:hover{background:#000000; } </style></Head><Body> <ul> <Li></Li> <Li></Li> <Li></Li> </ul></Body></HTML>
The above situation exists when the mouse pointer moves into the element by: hover the element itself to change the new style
Example Two<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Demo01</title> <style> *{margin:0;padding:0; }. Container{width:300px;Height:300px;Border:1px solid #ff9f5a; }. Content{width:100px;Height:100px;background:#27e7ff; }. Container:hover. Content{background:#000000; } </style></Head><Body> <Divclass= "Container"> <Divclass= "Content"></Div> </Div></Body></HTML>
In the example above, when there is a parent-child relationship, you can change the style of the child through the hover, which is the . Container:hover. Content, and hover has a space behind it; Children: Hover cannot change the style of the parent
Example Three<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Demo01</title> <style> *{margin:0;padding:0; }. Container{width:300px;Height:300px;Border:1px solid #ff9f5a; }. Content{width:100px;Height:100px;background:#27e7ff; }. Container:hover +.content{background:#000000; } </style></Head><Body> <Divclass= "Container"></Div> <Divclass= "Content"></Div></Body></HTML>
In the example above, when two elements are not parent-child relationships, the brothers relationship is passed through . Container:hover. Content This is not valid, you need to pass the "+" sign, that is, the . Container:hover +. Content to show the effect, but pay attention to the order of two elements Oh ~
Shortcomings, please advise ...
Use of Css:hover pseudo-class
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
