我是编码新手。我正在创建我的第一个导航栏。但是有些问题没有按我预期的那样工作。如果我想悬停 li 元素,我怎样才能保持主要的 UL 元素不增加它们的大小。非常感谢。
我试图在 ul li 中添加一个 margin:0 但它仍然没有用。 当我想将这些 li 悬停时,我想有不同的样式,但是当我将它悬停时,蓝色背景也会发生变化,我想要的是保持 .links 不变,只有当我悬停时,更改才会对 li 生效它
nav {
width: 100%;
height: 60px;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
li {
list-style: none;
}
nav .logo a {
font-size: 1.5rem;
font-weight: bold;
text-transform: uppercase;
}
nav .links {
display: flex;
gap: 2rem;
background: #00ABE4 ;
padding: 10px 20px;
}
nav .toggle-btn {
color: #00ABE4 ;
font-size: 1.5rem;
cursor: pointer;
display: none;
}
.nav-btn {
background: #00ABE4 ;
color: #fff;
padding: 0.5rem 1rem;
border: none;
outline: none;
font-size: 0.8rem;
font-weight: bold;
cursor: pointer;
transition: scale 0.2 ease-in-out;
}
.nav-btn:hover {
scale: 1.05;
color: #fff;
}
ul > li:hover {
background: #000;
padding: 5px ;
transition: all 0.2s ease;
}
nav .nav-btn:active {
scale: 0.95;
}
<header>
<nav>
<div class="logo">
<a href="#">Jury Mini</a>
</div>
<ul class="links">
<li><a href="hero">Home</a></li>
<li><a href="">About</a></li>
<li><a href="hero">Services</a></li>
<li><a href="hero">Contact</a></li>
</ul>
<a href="#" class="nav-btn">Get Started</a>
<div class="toggle-btn"><i class="fa-solid fa-bars"></i></div>
</nav>
</header>
你需要删除“padding: 5px ;” 你首先放入“ul>li :hover”样式的“ul”元素将保持静止
我将此代码添加到您的 CSS 中:
ul li {
list-style-type:none
}
ul li a {
text-decoration:none;
padding:5px;
}
ul li a:hover {
text-decoration:none;
padding:10px;
background: #000;
transition: all 0.5s ease-out;
color:#fff;
}
和删除
ul > li:hover
类
nav {
width: 100vw;
height: 60px;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
li {
list-style: none;
}
nav .logo a {
font-size: 1.5rem;
font-weight: bold;
text-transform: uppercase;
}
nav .links {
display: flex;
justify-content:center
align-items:center;
gap: 2rem;
background: #00ABE4 ;
padding: 10px 20px;
}
nav .toggle-btn {
color: #00ABE4 ;
font-size: 1.5rem;
cursor: pointer;
display: none;
}
.nav-btn {
background: #00ABE4 ;
color: #fff;
padding: 0.5rem 1rem;
border: none;
outline: none;
font-size: 0.8rem;
font-weight: bold;
cursor: pointer;
transition: scale 0.2 ease-in-out;
}
.nav-btn:hover {
scale: 1.05;
color: #fff;
}
ul li {
list-style-type:none
}
ul li a {
text-decoration:none;
padding:10px;
}
ul li a:hover {
text-decoration:none;
padding:10px;
background: #000;
transition: all 0.5s ease-out;
color:#fff;
}
nav .nav-btn:active {
scale: 0.95;
}
<header>
<nav>
<div class="logo">
<a href="#">Jury Mini</a>
</div>
<ul class="links">
<li><a href="hero">Home</a></li>
<li><a href="">About</a></li>
<li><a href="hero">Services</a></li>
<li><a href="hero">Contact</a></li>
</ul>
<a href="#" class="nav-btn">Get Started</a>
<div class="toggle-btn"><i class="fa-solid fa-bars"></i></div>
</nav>
</header>