CSS菜单在使用悬停效果滚动时闪烁答案

【问题标题】：CSS menu is flickering when scrolling through it with hover effectsCSS菜单在使用悬停效果滚动时闪烁
【发布时间】：2010-05-11 19:08:22
【问题描述】：

我希望我能很好地描述问题！？你可以在这里看到它：

http://dealmob.de/index_dev.html

当您快速上下悬停在菜单上时，您会看到它没有停留，而是闪烁，就像您将边距/填充更改几个像素一样。

关于如何解决这个问题的任何建议？

非常感谢

点赞：

        #topcities {
            float:right;
        }  

        #topcities li {
            padding-left:5px;
            width:100px;
        }
        #topcities li:hover {
            cursor:pointer;
            color:#000;
            background: url(images/hover_menue_back.jpg) repeat-x #FFF;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border:grey 1px solid;
            width:100px;
        }

【问题讨论】：

网站已修复！太棒了

标签： jquery css hoverintent

【解决方案1】：

这是因为您在悬停时添加了边框，而在非悬停时没有边框。为其添加透明边框以防止弹跳。

    #topcities li {
        padding-left:5px;
        width:100px;
        border: 1px solid transparent;
    }

如果您不希望在不支持 border-color: transparent（我正在查看您的 IE）的浏览器上使用彩色边框，您可以在边距或填充中添加一个额外的像素。

【讨论】：

一些浏览器不支持透明的border-color，并将其渲染为文本color（如果我没记错的话）。
您也可以手动调整填充以占用额外的空间。
@MrHen，我的回答在过去 30 多分钟内都这么说。
嗯。奇怪，我完全错过了。对不起。 :P

【解决方案2】：

非悬停时有一个 padding-left，悬停时没有 padding-left。为悬停规则添加一个 padding-left 规则。

【讨论】：

这不是，它无论如何都会在悬停时被继承。