Sometimes need to use mouseover and mouseout these two mouse events, but write JS and more trouble, but also to add monitoring events, so can use CSS to solve things as far as possible yongcss solve, this can improve performance, the following said I: Hover understanding:
Before learning computer applications, the teacher taught us to use: hover selector to complete the drop-down menu, before only know how to use, do not know why to use it, now write down how it is used
Definition and usage
Defined:
: The hover selector is used to select the element on which the mouse pointer floats.
: hover selector for all elements
Usage 1:
This means that when the mouse hovers over a style, the background color of a is set to yellow
A:hover { background-color:yellow; }This is the most common usage, just a change of style through a
Usage 2:
Use a to control the style of other blocks:
Use a to control the child element B of a:
. a:hover. b { background-color:blue; }Use a to control a sibling element C (sibling element):
. a:hover +. C { color:red; }Use a to control a nearest element D:
. a:hover ~. d { color:pink; }To summarize:
1. Nothing in the middle control sub-elements;
2. ' + ' controls sibling elements (sibling elements);
3. ' ~ ' controls the nearest element;
Instance
Use a button to control the movement of a box, when the mouse moves over the button, the box stops moving, the mouse moves away, the box continues to move
Body Code:
<body> <p class= "btn Stop" >stop</p> <p class= "animation" ></p> </body >
CSS style:
<style> . Animation { width:100px; height:100px; Background-color:pink; margin:100px Auto; Animation:move 2s infinite alternate; -webkit-animation:move 2s infinite alternate; } @keyframes Move { 0% { transform:translate ( -100px, 0); } 100% { transform:translate (100px, 0); } } . btn { padding:20px 50px; Background-color:pink; Color:white; Display:inline-block; } . Stop:hover ~. Animation { -webkit-animation-play-state:paused; animation-play-state:paused; } </style>Implementation results:
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
How CSS quirks box models and standard box models are used
Animated sequence of CSS3 animation
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
