匹配锚定和div悬停状态的选择器与超链接不匹配

我的页面标记的格式如下:

<a href="#Products">
    <div id="Tag">
        <span>A website hyperlink</span>
    </div>
</a>

#Tag {
    opacity: 1;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
    position: absolute;
    left: 50px;
    top: 107px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: visible;
    width: 527px;
    white-space: nowrap;
    text-align: left;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 55px;
    color: rgba(255,255,255,1);
}

正如您所见,颜色是在容器上显式设置的。

我想改变悬停的颜色。

a:hover {
    color: red !important;
}

a:hover {
	color: red !important;
}

#Tag {
    opacity: 1;
    position: absolute;
    left: 20px;
    top: 20px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: visible;
    width: 527px;
    white-space: nowrap;
    text-align: left;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 35px;
    color: rgba(0,0,0,1);
}

<a href="#Products">
    <div id="Tag">
        <span>A hyperlink</span>
    </div>
</a>