Css Sliding Door Technology

Css Sliding Door Technology

The double sliding door effect is still quite common, but it is easy to understand:

 

The two doors are like the effect of overlapping two block-level elements. See the following code:

 

# Mydoor ul li a: hover {color: # fff; // sets the background black background: url(hover.gif); // sets the background image. The image surrounding the image should be transparent, in this way, the background can be set out}

The changes on the left side are as follows:

 

 

/** Change the content under connection a to the block level; give the right a width */# Mydoor ul li a B {display: block; // set it to the block element padding: 0 14px 0 0; // set the right margin to 14 pixels}/** move to the upper right corner */# Mydoor ul li a: hover B {color: # fff; // set the background black background: url(hover.gif) no-repeat right top; // set the background image, right aligned}

Effect after editing