：hover选项不适用于特定元素

Question

我不明白为什么:hover在我的情况下不起作用。我已经检查了很多次代码，但仍然找不到错误。

HTML：

<div id="divId">
    <i class="fa fa-plus-square" title="someTitle"></i>
    <span id="spanId" title="Other Title">StackOverFlow rules</span>
</div>

注意：<i>标签只是我元素的图标

CSS：

#divId {
    cursor: pointer;
    color: #fff;
    float: left;
    margin-top: 4.4px;
    margin-right: 5px;
    font-size: 1.5rem;
}
#spanId {
    display: none;
    border-radius: 3px;
    color: #16325c;
    background-color: #d5dcea;
    position: absolute;
    padding: 7px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transform: translate(-43%, 0) !important;
    z-index: 1;
}

#spanId :hover {
    background: #e7edf4 !important;
}

因此，一旦我的鼠标光标移到<span>区域，就不会改变。但是我需要<span>来更改其颜色