使用悬停效果滚动浏览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

左侧有一个填充物，悬停时没有填充物。 为您的悬停规则添加一个填充左侧规则。