Home  >  Article  >  Web Front-end  >  css滑动门技术_html/css_WEB-ITnose

css滑动门技术_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:46:271139browse

双重滑动门效果还是比较常用的,其实很好理解:


两个门就好比两个块级的元素重合所形成的效果,看一段代码如下:


#Mydoor ul li a:hover{	color:#fff; //设置背景 黑色 	background: url(hover.gif); //设置背景 图片,图片周边应为透明,这样才能把背景衬托出来 } 
可以看到左侧变化如下



/**将连接a下的内容变为块级;给右边一个宽度*/#Mydoor ul li a b{ 	display:block; //设置为块元素 	padding:0 14px 0 0; //设置右边距为14像素 }  /**经过后右上定位*/ #Mydoor ul li a:hover b{ 	color:#fff; //设置背景 黑色 	background: url(hover.gif) no-repeat right top; //设置背景图片,右对齐 }

编辑完后的效果


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn