jquery - CSS菜单在使用悬停效果滚动时闪烁

Question

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

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;
        }

Answer 1

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

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

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

Answer 2

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