如何在我悬停时突出显示3行切换按钮？

问题描述：

我有3行切换按钮，当我悬停只有1行突出显示为蓝色。当我将鼠标悬停在按钮上时如何突出显示3条切换线？如何在我悬停时突出显示3行切换按钮？

CSS

.menu-toggle-btn{cursor:pointer;width:30px;height:30px;position:fixed;top:4px;} 
.menu-toggle-btn span{background:#444;display:block;width:30px;height:4px;border-radius:5px;margin-bottom:5px;-webkit-transition: all 0.5s linear;transition:all 0.3s linear;margin-left:5px;} 
a.menu-toggle-btn span:hover{background:blue;display:block}

HTML

<a href="index.php" class="menu-toggle-btn"><span></span><span></span><span></span></a>

发生这种情况是因为您在跨度上添加了悬停效果。所以当鼠标超过一个跨度时，它会变得高亮。 – Imran

答

变化的最后一行CSS代码：

a.menu-toggle-btn:hover span{background:blue;display:block}

答

尝试CSS的这种改变你最后一道防线。

a.menu-toggle-btn:hover > span{background:blue;display:block}

答

这应该工作。

由于其他css规则并不特定于'a'标签。将其更改为：

.menu-toggle-btn:hover span 
{ 
    background:blue; 
    display:block 
}

如何在我悬停时突出显示3行切换按钮？

相关推荐