时间戳

首页 > 解决方案 > 匹配锚点和 div 悬停状态的选择器与超链接不匹配

html - 匹配锚点和 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>

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

标签： htmlcss

解决方案

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>

推荐阅读