Question

我想创建一个悬停效果，例如此演示页上的左侧类别菜单http://themeforest.net/item/mazine-wordpress-theme-a-wp-ecommerce-theme/full_screen_preview/198602

我尝试添加padding-left：7px;在css文件中，但这看起来不一样。

Answer 1

不确定您的具体要求是什么，但是当您将鼠标移到它们上方时，如果列表项目如何稍微滑动，请查看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;演示：

菜单悬停效果

1 个答案: