教程 | 特别的 hover effect

真的是或别了好久的教程部落格呀，自制模板呢，还有在时不时地发布，只是这教程呀，多久没发布了，我看看啊。嗯，也还好，就 9 个月没发布过了 orz 所以咧，今天就来发布一篇自创的教程。其实也不是没有发布过，这个效果呢，在我上一个自制模板 Black & White 里面呢，就用过了哦 XD 不过单独发布这篇教程的话，大家就不需要到模板的代码里去挖这个效果的代码了 科科

效果图如上 ▲

Blog Template 使用者

1. 布局 - 添加小工具 - HTML/JavaScript

2. 把以下代码添加进去

Blogskin 使用者

1. 模板 - edit HTML

2. Ctrl + F 寻找代码 </style>

3. 在 </style> 下面添加以下代码

.b-musicbox {
position: fixed;
top: 0px;
left: 30px;
background: #eee;
color: #000;
font-family: tinytots;
font-size: 8px;
letter-spacing: 1px;
padding: 5px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover {
margin-top: -20px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover .playbox {
top: 3px;
-webkit-transition-duration: .7s;
}
.playbox {
position: fixed;
top: -30px;
left: 34px;
width: 50px;
padding: 3px;
border: 1px solid #ccc;
background: white;
overflow-x: hidden;
z-index: 1000;
-webkit-transition-duration: .7s;
}

<div class='b-musicbox'>HOVER HERE
<div class='playbox'>内容</div>
</div>

解释会分成两个部分来说，一个是 before hover, 另一个是 after hover 哦。

小解释

 Before hover （灰色背景框）

紫色代码：小工具距离左边有多远 *改成right就会出现在部落格右手边哟

深紫代码：小工具背景色
浅蓝代码：HOVER HERE 字体颜色

蓝色代码：小工具多大，margin-top - 的号码就会越大，如果没有更改我预设的大小，这个就可以忽略喽 :)

 After hover （灰色边框）
红色高亮：框框距离 top 有多远
橙色高亮：框框距离左边有多远 *改成right就会出现在部落格右手边哟
绿色高亮：边框种类、粗度（可参考框框的种类）
蓝色高亮：框框的背景色

红色代码：小工具内的内容
绿色代码：Before hover 的内容（HOVER HERE）*可自行更改

备注：
 此款小工具适用于置放音乐播放器
 如果想要置放其他小工具，如：欢迎词等等，可自行调整小工具的大小哟 :D
 因为涉及更改小工具大小，代码上可能会出现错误，可以留言下大家的问题，会尽快回复 :)