gpt4 book ai didi

html - 在导航栏中悬停时填充顶部元素

转载 作者:太空宇宙 更新时间:2023-11-04 03:33:06 24 4
gpt4 key购买 nike

我已经尝试在悬停元素上 padding-top ul#top li a 但它无法执行代码,也许内联 block 显示正在困扰填充以显示,但我不知道任何其他显示可以帮助他内联并使他能够填充顶部。如果我的目标无法理解,我会尝试在悬停时将“a”标签填充到顶部(大约 5 像素填充)。

这是我的 CSS 代码:

ul#top{
list-style: none;
}
ul#top li{
display: inline-block;
padding-right: 30px;
}
ul#top li a{
color: white;
text-decoration: none;
font-family: "Comic Sans MS", cursive, sans-serif;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-o-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
ul#top li a:hover{
padding-top: 10px;
color: green;
}

我的 HTML:

<div class="header">
<div class="menu">
<ul id="top">
<li><a href="#">Home</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</div>

如何在行内 block 显示中启用 padding-top? (内联 block 可能不是问题,但我认为是)

最佳答案

您可以添加 bottom: 10px 而不是 position: relative。还添加 padding-bottom 以解决悬停问题:

ul#top {
list-style: none;
}
ul#top li {
display: inline-block;
padding-right: 30px;
}
ul#top li a {
color: white;
text-decoration: none;
font-family:"Comic Sans MS", cursive, sans-serif;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-o-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
ul#top li:hover a {
position: relative;
padding-bottom: 10px;/*Add padding bottom*/
color: green;
bottom: 10px;/*Add bottom 10px*/
}
body {
background: red;
}
<div class="header">
<div class="menu">
<ul id="top">
<li><a href="#">Home</a>
</li>
<li><a href="#">test</a>
</li>
<li><a href="#">test</a>
</li>
<li><a href="#">test</a>
</li>
<li><a href="#">test</a>
</li>
</ul>
</div>
</div>

关于html - 在导航栏中悬停时填充顶部元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26017820/

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