我正在使用 css 创建一个带有按钮的导航栏,我希望在不调整 div 大小的情况下悬停时具有背景颜色。我希望按钮留在原地,只是在它们后面有背景颜色。
.topnav {
overflow: hidden;
background-color: #1C313A;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav-right {
float: right;
}
button {
padding: 0px 0px;
background-color: transparent;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
margin-left: 20px;
}
button:hover {
width: 50px;
height: 50px;
background-color: #192C34;
border-radius: 50%;
padding: 0px 0px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
<a href="#home">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<a href="#news"><button>
<i class="fa fa-upload fa-lg"></i>
</button></a>
<a href="#contact">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<div class="topnav-right">
<a class="logo" style="pointer-events:none;">TidyBlocks</a>
</div>
</div>
当前输出:
期望的输出
最佳答案
.topnav {
overflow: hidden;
background-color: #1C313A;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav-right {
float: right;
}
button {
padding: 0px 0px;
background-color: transparent;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
margin-left: 20px;
width: 50px;
height: 50px;
}
button:hover {
background-color: #192C34;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
<a href="#home">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<a href="#news"><button>
<i class="fa fa-upload fa-lg"></i>
</button></a>
<a href="#contact">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<div class="topnav-right">
<a class="logo" style="pointer-events:none;">TidyBlocks</a>
</div>
</div>
关于html - 在按钮悬停时限制 div 调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58543461/