Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.