应用错误收集

移动div与过渡高度

时间：2014-12-27 01:47:50

标签： html css

今天的最后一个问题：/ 如果有人将鼠标悬停在链接上，则高度应该会改变。但问题是现在，完整的div移动了。这是页面： Page

以下是代码：

*{
    font-family: "Open Sans";
    margin: 0px;
    padding: 0px;
}

body{
    background: url("images/bg.png") repeat-x scroll left top #9EB5D6;
}

nav{
    text-align: right;
}

nav > ul{
    margin: 0px;
    padding: 0px;
}

nav ul > li{
    display: inline-block;
    list-style-type: none;
    margin-left: 10px;
}

nav ul li > a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background:linear-gradient( #FCFCFC, #C8CACB);
    border: 2px solid black;
    border-bottom: 0px;
    transition: padding-top 0.5s;
}

nav ul li > a:hover{
    background:linear-gradient( #C8CACB, #FCFCFC);
    padding-top: 15px;
}

.wrapper{
    margin-top: 100px;
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}

.content{
    background-color: #E7E5BE;
    padding: 10px;
    border: 2px solid black;
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css" >
        <!-- Open Sans -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>
    <body>

        <div class="wrapper">
            <nav>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </nav>
            <div class="content">
                <p>Content</p>
            </div>
        </div>
    </body>
</html>

我希望有足够的信息。

1 个答案:

答案 0 :(得分：1)

一种选择是使用负边距来否定添加的填充。

摘录：

nav ul li > a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background:linear-gradient( #FCFCFC, #C8CACB);
    border: 2px solid black;
    border-bottom: 0px;
    transition: padding-top 0.5s, margin-top 0.5s;/* <-- transition margin */
}

nav ul li > a:hover{
    background:linear-gradient( #C8CACB, #FCFCFC);
    padding-top: 15px;
    margin-top: -15px;/* <-- negative margin */
}

工作示例：

*{
    font-family: "Open Sans";
    margin: 0px;
    padding: 0px;
}

body{
    background: url("images/bg.png") repeat-x scroll left top #9EB5D6;
}

nav{
    text-align: right;
}

nav > ul{
    margin: 0px;
    padding: 0px;
}

nav ul > li{
    display: inline-block;
    list-style-type: none;
    margin-left: 10px;
}

nav ul li > a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background:linear-gradient( #FCFCFC, #C8CACB);
    border: 2px solid black;
    border-bottom: 0px;
    transition: padding-top 0.5s, margin-top 0.5s;
}

nav ul li > a:hover{
    background:linear-gradient( #C8CACB, #FCFCFC);
    padding-top: 15px;
    margin-top: -15px;
}

.wrapper{
    margin-top: 100px;
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}

.content{
    background-color: #E7E5BE;
    padding: 10px;
    border: 2px solid black;
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css" >
        <!-- Open Sans -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>
    <body>

        <div class="wrapper">
            <nav>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </nav>
            <div class="content">
                <p>Content</p>
            </div>
        </div>
    </body>
</html>