css 鼠标移入后div向下延伸且不影响下一行div该怎么做？如图所示

html-css011

css 鼠标移入后div向下延伸且不影响下一行div该怎么做？如图所示,第1张

每个div设置成float:right自己定好初始位置，

然后过度div的高度，如

div

{

float:right

width:100px

height:100px

background:blue

transition:height 2s

-moz-transition:height 2s/* Firefox 4 */

-webkit-transition:height 2s/* Safari and Chrome */

-o-transition:height 2s/* Opera */

}

div:hover

{

height:300px

}

最后，

通过js设置鼠标经过的div的

z-index，

让它的z方向值最高，以至于不被遮挡

最后一步如果有遮挡的情况可以这么解决，如果没有就不用了

背景色渐变两种方法：

1,做一个竖的细条gif,颜色从上到下渐变.以此作背景图.背景图片的颜色无法无限延伸,因为gif长度有限；

2,css滤镜做背景色渐变如下,背景颜色渐变可以无限延伸:程序代码<style type="text/css"

div{width:100pxoverflow:hiddenwhite-space:nowrap}

td{width:100pxoverflow:hiddenwhite-space:nowrapword-break:keep-all}

引自http://www.cftea.com/c/2010/12/UVBUCD0J888L2XPQ.asp