html - 匹配 anchor 和 div 悬停状态的选择器不匹配超链接

Question

我的页面标记如下:

<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>

是否有另一个选择器来匹配这个超链接标记？

Answer 1

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>