gpt4 book ai didi

html - 使用过渡高度移动 div

转载 作者:行者123 更新时间:2023-11-28 01:37:14 25 4
gpt4 key购买 nike

今天的最后一个问题:/如果有人将鼠标悬停在链接上,高度应该改变。但是现在的问题是,完整的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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com