Create a background switch with CSS3 new selector

Before writing CSS3 time is to pick up the project needs to use, no systematic study, these days good to fill up a bit of CSS3 knowledge, really benefited! I think the new selectors are extremely useful! Today will come to these days to learn to do a click on the label switch background effect, is a pure CSS production oh, do not rely on JS, as a summary of it!

First of all, the pre-work as the first to build the directory of those.

index.html, CSS folder (including STYLE.CSS), img folder (contains 1.jpg,2.jpg,3.jpg,4.jpg)

Finally finished the effect is as follows (because I like basketball, so made a few NBA characters cartoon material), concrete implementation, please look at the code behind!

Index.html, the structure is relatively simple, not much to explain

<div class= "box" >




<ul>
<li><a href= "#player1" > Kobe </a></li>
<li><a href= "#player2" > James </a></li>
<li><a href= "#player3" > Yao Ming </a></li>
<li><a href= "#player4" > Nash </a></li>
</ul>
</div>

CSS: Focus on explaining

Body,ul{margin:0;padding:0;list-style:none}

. box{position:relative;width:400px;height:400px;padding:10px;margin:10px auto;border:1px solid #f0f0f0; Box-shadow : 0 0 3px Rgba (0,0,0,0.5); Overflow:hidden}
. Box img{position:absolute;top:10px;left:10px;width:400px;height:400px}

. Box Li{display:inline;position:relative;float:left;width:90px;height:90px;color: #fff; text-align:center; text-shadow:0 0 3px Rgba (0,0,0,0.9), margin:280px 4px 0 4px;border:1px solid #888; Cursor:pointer;z-index:10}
. Box Li a{display:block;width:90px;height:40px;padding:50px 0 0;color: #fff; Text-decoration:none}
. Box Li:nth-of-type (1) {background: #552F86}
. Box Li:nth-of-type (2) {background: #9C0701}
. Box Li:nth-of-type (3) {background: #FFCA34}
. Box Li:nth-of-type (4) {background: #D2C1A6}
. Box Li a::after{content: ';p osition:absolute;top: -20px;left:25px;width:40px;height:40px;border-radius:40px; BORDER:2PX Solid #999}
. Box Li:nth-of-type (1) a::after{background:url (.. /img/1.jpg) Center;background-size:cover}
. Box Li:nth-of-type (2) A::after{background:url (.. /img/2.jpg) Center;background-size:cover}
. Box Li:nth-of-type (3) A::after{background:url (.. /img/3.jpg) Center;background-size:cover}
. Box Li:nth-of-type (4) A::after{background:url (.. /img/4.jpg) Center;background-size:cover}
. Box Li a::before{content: ';p osition:absolute;top: -18px;left:27px;width:40px;height:40px;border-radius:40px; Background:rgba (255,255,255,0.3); z-index:20}
. Box Li a:hover::before{opacity:0}

#player1: Target{z-index:10}
#player2: Target{z-index:10}
#player3: Target{z-index:10}
#player4: Target{z-index:10}

Img:not (: target) {z-index:5}

Look at the HTML code so concise, how to achieve the seemingly complex effect?

1, to each person's small box defines the different background color and the avatar, uses is constructs the pseudo-class selector:Nth-of-type (), the Avatar uses the pseudo-element :: after

. Box Li: nth-of-type (1){background: #552F86}
. Box Li: Nth-of-type (2){background: #9C0701}
. Box Li: Nth-of-type (3){background: #FFCA34}
. Box Li: Nth-of-type (4){background: #D2C1A6}

Use Nth-of-type () to define a different color for each small box.

. Box Li a::after{content: ';p osition:absolute;top: -20px;left:25px;width:40px;height:40px;border-radius:40px; border:2px Solid #999}
. Box Li:nth-of-type (1) a::after {Background:url (.. /img/1.jpg) Center; Background-size:cover }
. Box Li:nth-of-type (2) a::after { Background:url (.. /img/2.jpg) Center; Background-size:cover }
. Box Li:nth-of-type (3) a::after { Background:url (.. /img/3.jpg) Center; Background-size:cover }
. Box Li:nth-of-type (4) a::after { Background:url (.. /img/4.jpg) Center; Background-size:cover }

Using the Nth-of-type and pseudo elements after the implementation of each thumbnail to set a different picture, and background-size:cover, to achieve the thumbnail of the picture, so that the small circle filled with the effect of the whole picture!

. Box Li a::before{content: ';p osition:absolute;top: -18px;left:27px;width:40px;height:40px;border-radius:40px; Background:rgba (255,255,255,0.3); z-index:20}
. Box Li a: Hover::before{opacity:0}

Above this code, is for the element added mask effect, let the mouse moved into the element is a bit different, enhance the visual effect!!!

It may be strange to have a person, Li Li Why must put a label it?

That's the key to today's theme! Because we need to use the most important thing : target, that's what the authorities are explaining:

: TargetDefinition and usage

The URL is followed by an anchor name #, which points to a specific element within the document. The linked element is the target element.

: The target selector can be used to pick the destination element for the current activity.

In the example, the URL has a tag with the anchor name #就是 Li, and the target element is the corresponding img

#player1: Target{z-index:10}
#player2: Target{z-index:10}
#player3: Target{z-index:10}
#player4: Target{z-index:10}

Is that when you click on a, the IMG element should be displayed in front,

IMG: Not (: target){z-index:5}

: The Not () selector is to remove certain elements, meaning that elements that are not elements of a class are in effect: not (: target) : The below Z-index is less than the target element for a picture that is not a destination element!

Through the above, it realizes the background switch effect, which is the effect of pure CSS, and does not use js!

Create a background switch with CSS3 new selector