Css sliding door technology, css sliding door

Css sliding door technology, css sliding door

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