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

Question

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

http://jsfiddle.net/s0w5pnmk/

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>

Answer 1

将最后一行CSS代码更改为:

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