我的菜单栏无法使用悬停时遇到问题。我尝试了它与页面的另一部分,它工作得很好,但没有与菜单。我在这里做错了什么?
.menu{
display: flex;
justify-content: center;
margin: auto;
background: #e7e3d4;
}
.menu ul li{
list-style: none;
float: left;
color: #b23850;
margin: 0 13px;
font-size: 20px;
display: flex;
}
.menu ul li:hover{
background: 8590AA;
delay:.5s;
}
<div class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Know Joe</li>
<li>Contact Us</li>
</ul>
</div>
答案 0 :(得分:2)
您可以使用背景颜色属性使用#sign,如下所示:
.menu ul li:hover {
background: #8590AA;
}
.menu{
display: flex;
justify-content: center;
margin: auto;
background: #e7e3d4;
}
.menu ul li{
list-style: none;
float: left;
color: #b23850;
margin: 0 13px;
font-size: 20px;
display: flex;
padding: 0 10px;
}
.menu ul li:hover{
background: #8590AA;
transition: all 0.55 ease-in;
}
<div class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Know Joe</li>
<li>Contact Us</li>
</ul>
</div>
答案 1 :(得分:1)
使用transition: background-color 0.5s
代替delay: 0.5s
.menu {
display: flex;
justify-content: center;
margin: auto;
background: #e7e3d4;
}
.menu ul {
padding: 0;
margin: 0;
display: flex;
}
.menu ul li {
list-style: none;
color: #b23850;
padding: 15px;
font-size: 20px;
background-color: #e7e3d4;
}
.menu ul li:hover {
background-color: #8590AA;
transition: all .5s;
}
<div class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Know Joe</li>
<li>Contact Us</li>
</ul>
</div>
答案 2 :(得分:0)
您在菜单ul li:hover 的背景属性中缺少#符号 尝试以下
.menu ul li: hover{
background: #8590AA;
delay :0.5s;
}