0

我正在为我的网站设计一个新设计，看看我喜欢什么（触摸和感觉）。

到目前为止，我的顶部导航栏很棒，除了这个问题。

当您将鼠标悬停在仅包含文本的链接上时，一切都很好。添加了顶部填充以使其看起来像导航选项卡“移动”/“增长”。

但是，当我将鼠标悬停在包含我的一张图片（Paypal、Twitter、YouTube）的导航链接上时，会应用顶部填充，但它会影响主要父元素的位置。这是适用于 Windows 7 的最新版本的 Chrome 和 Firefox。

BODY 不是受影响的父级，但#main（如我的 CSS 中定义的）“移动”/“增长”也是如此。

URL 是http://rickyyoder.x10.mx/new/，代码如下：

   #main{
        width:94%;
        max-width:880px;
        margin:12px auto;
        background:#fff;
        box-shadow:1px 1px 4px #000;
        border-radius:4px;
        padding:2px 2px 8px 2px;
        }

        #nav{
        position:relative;
        top:-0.8em;
        background:#fff;
        border-radius:4px;
        padding:2px;
        display:inline-block;
        }

        #nav a{
        color:#000;
        display:inline-block;
        padding:1px 1em 1px 1em;
        border-radius:0 0 4px 4px;
        box-shadow:0px 2px 2px -2px #fff inset, 0px -4px 16px -6px #aaa inset;
        -webkit-transition:background 0.5s, padding-top 0.25s;
        -moz-transition:background 0.5s, padding-top 0.25s;
        vertical-align:top;
        }

        #nav a:hover{
        padding-top:4px;
        background:#eee;
        }

        #nav a:hover img{
            -webkit-transition:-webkit-filter 1.5s;
        }

        #nav a:hover img{
            -webkit-filter:hue-rotate(360deg);
        }

有什么办法可以避免这种情况，但仍然对这些链接以及文本链接产生“移动”/“增长”效果？提前致谢。

4

1 回答 1

0

您可以解决向导航添加高度的问题

#nav {
position: relative;
top: -0.8em;
background: #fff;
border-radius: 4px;
padding: 2px;
display: inline-block;
height: 50px;
}
于 2013-10-31T16:26:14.550 回答