1.效果图(具体代码再最下面):
2.上面各种效果的思路:
-
效果一:
①效果图:
②思路:用绝对定位将俩个相同的大小的div定位到一起,然后将index高的div的width设置为0,最后hover的时候使其width变为100%,还有color从blue变为white就可以了。 -
效果二:
①效果图:
②思路:需要五个div来实现效果,外层一个div用来设置border,内层四个div的width为外层div的25%,height设置为0,接着用绝对定位将四个div铺满外层div的空间。最后hover时,需要设置其left 和top或者left 和bottom,然后hover时,让四个div的height变为100%。 -
效果三:
①效果图: