Day13 hover应用(二)

hover + positon

• 让图片或是区块移动

.article-content img:first-child{ 
position: absolute;  
top: 0px;
left: 0px;
}
.article:hover .article-content img:first-child{
right: 0px;  
left: auto;
}

• 也可以定义当滑鼠经过时，图片位移几个像素，例如 left: 50px; 就是往右位移50像素，如果觉得板面太杂乱大多是因为侧栏的关系，可以减少侧栏元件，让版面乾净一点，但有些部落格需要的元件较多无法删减，而伸缩侧栏就是一个很好用的设计。

links{
position: absolute;  
top: 0px;
right: -250px;  
-webkit-transition: right 0.5s ease-out;  
-moz-transition: right 0.5s ease-out;  
-o-transition: right 0.5s ease-out;
transition: right 0.5s ease-out;
}
#links:hover{
right: 0px;  
}
body{
overflow-x: hidden;

侧栏有分侧栏1(#links-row-1)与侧栏2(#links-row-2)，若只想将其中一个侧栏变成伸缩侧栏，可将以上语法#links 改成 #links-row-1 或 #links-row-2 就可以了。另外要注意到这边有选单的话，建议在侧栏多出的那一小角设一个背景图上面有提示文字。

下一篇我将介绍互动式CSS按钮动画的应用ㄛ!