菜单悬停效果

Posted 2023-05-08

【中文标题】菜单悬停效果

【英文标题】：Menu hover effect

【发布时间】：2012-06-05 23:05:30

【问题描述】：

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

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

【问题讨论】：

显示您的代码？也许我们可以帮助解决您的问题？

看起来他们使用 jQuery 动画效果来设置 padding-left 的 LI 标签。尽管就像@JohnRiselvato 所说的那样，我们必须查看您的代码才能看到您在做什么不同。

【参考方案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;

​

更多信息和演示：

http://www.w3schools.com/css3/css3_transitions.asp http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/