Question

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

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

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

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

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

网址为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);
        }

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

Answer 1

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

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

在链接上填充影响父元素位置的图像

1 个答案: