请告诉我如何定位我的导航栏固定和转换比例功能工作

Question

当导航条的位置与类顶部固定时，我的转换属性scale在我应用的div元素上不起作用。框上悬停效果的唯一方法是当我删除导航栏上的位置时。

我的html:

<header>
<div class="container">
<div class="top">
<div class="logo">Lower Usuma Dam</div>
<div class="nav">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#photos">Photos</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>

CSS样式：

.box-1:hover,
.box-2:hover,
.box-3:hover,
.box-4:hover {
transform: scale(1.1);
transition: 0.9s;
}
.top {
/* position: fixed;
left: 0;
top: 0;
z-index: 1; */
display: flex;
justify-content: space-between;
align-content: center;
width: 100%;
height: 100%;
line-height: 4em;
}

Answer 1

transition用于主div，而不是悬停css。我创造了一个例子。我希望它能帮助你。如果有任何疑问，你可以问我。

.box-common{width: 50px;height: 50px;background: #fff;border: 3px solid #000;margin: 10px;display: inline-block; transition: all 0.9s ease-in-out;}
.box-1:hover,
.box-2:hover,
.box-3:hover,
.box-4:hover {
transform: scale(1.5);   
}

<div class="box-common box-1"></div>
<div class="box-common box-2"></div>
<div class="box-common box-3"></div>
<div class="box-common box-4"></div>