How to use css pseudo-class selector hover to control two element attributes
Editor to share with you how to use the css pseudo-class selector hover to control the attributes of the two elements, I hope you will gain something after reading this article, let's discuss it together!
Using css pseudo-class selector hover to control two element attributes
Example 1:
# a:hover {color: # FFFF00;} # a:hover > # b:first-child {color: # FF0000;} # a:hover > # b {color: # FF00FF;} # a:hover + # c {color: # 00FF00;} # a:hover + # c > # b {color: # 00FF;} element 1 element 2 element 2 element 3 element 2
Example 2:
Header-bar-search {width: 300px; height: 50px; font-size: 16px; margin-top: 100px; margin-left: 40%;} .header-bar-search input {display: inline-block; height: 50px; outline: 0; border: 1px solid # e0e0e0; background: # fff; transition: border-color .3s linear,color .3s linear,background-color .3s linear;} .header-bar-search .searchIput1 {width 250px: Padding: 0 10px; border-right: none;} .header-bar-search. SearchIput2 {float: right; width: 50px; font-size: 20px;} .searchIput1: hover {border-color: # ff6700;} .searchIput2: hover {color: # fff; background: # ff6700;}. SearchIput1:hover + .searchIput2 {border-color: # ff6700;} tps: please hover your mouse over the search box and button
Feedback: using hover to control two elements, you can write a simple drop-down menu, pop up a QR code or change the overall color of the input box without js.
Prompt to wait for small special effects.
Note: triggering selectors in use can only write selectors that need to trigger the element itself.
Out-of-service
Parent element selector 1 child element selector 1:hover, parent element selector 2 child element selector 2:hover {color:red;}
The way of writing
Recommended
Element selector 1:hover + element selector 2 {color:red;}
Element selector 1:hover {color:red;}
The way of writing
After reading this article, I believe you have a certain understanding of "how to use css pseudo-class selector hover to control two element attributes". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!
