今天的最后一个问题:/ 如果有人将鼠标悬停在链接上，高度应该改变。 但是现在的问题是，完整的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>我希望这些信息足够了。
最佳答案
一种选择是使用负边距来否定添加的填充。
摘录:
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>关于html - 使用过渡高度移动 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27663689/