我想创建一个悬停效果,例如此演示页上的左侧类别菜单http://themeforest.net/item/mazine-wordpress-theme-a-wp-ecommerce-theme/full_screen_preview/198602
我尝试添加padding-left:7px;在css文件中,但这看起来不一样。
答案 0 :(得分:3)
不确定您的具体要求是什么,但是当您将鼠标移到它们上方时,如果列表项目如何稍微滑动,请查看this demo。它使用CSS3过渡。
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
#menu li {
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#menu li:hover {
padding-left:7px;
}
更多信息&amp;演示: