如何改善这种悬停效果？

Question

我正试图悬停在一个元素上，我希望悬停（颜色效果）覆盖整个单元格。目前它只覆盖了一半。这是它目前的样子。这是codepen。

这就是我想要的样子。

以下是代码。

HTML

<div class="leftSideNav1">
    <div class="leftSideNav1__lists">
        <a href=""><i class="material-icons">home</i><br />Home</a>
    </div>
    <div class="leftSideNav1__lists">
        <a href=""><i class="material-icons">pause</i><br>YouTubers</a>
    </div>
    <div class="leftSideNav1__lists">
        <a href=""><i class="material-icons">assignment</i><br>Campaigns</a>
    </div>
    <div class="leftSideNav1__lists">
        <a href=""><i class="material-icons">message</i><br>Messages</a>
    </div>
    <div class="leftSideNav1__lists">
        <a href=""><i class="material-icons">pause</i><br>Videos</a>
    </div>
</div>

CSS

.wrapper .leftSideNav1 {    
    grid-column: 1/2;
    grid-row: 1/14;
    background-color: #37474f;  
}

.wrapper .leftSideNav1__lists { 
    padding: 15px;      
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

.wrapper .leftSideNav1__lists a{    
    color: #9e9e9e;
    text-decoration: none;
    box-sizing: border-box;
    width: 100%;
    padding: 0px;
}

.wrapper a:hover {
    background-color: #f44336;
    color: #fff;
    display: block; 
    box-sizing: border-box;     
}

Answer 1

从 .wrapper .leftSideNav1__lists 中删除填充，以便CSS就像这样：

.wrapper .leftSideNav1__lists {
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

将填充添加到 a 标记，并将其设为内嵌块，如下所示：

.wrapper .leftSideNav1__lists a {
    color: #9e9e9e;
    text-decoration: none;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    display: inline-block;
}