Question

我正在为学校建立一个网上商店，并且有一个带有遮罩和h2链接的图像。转型。

    <div class="foto-overlay">
                <img src="images/heren.jpg" alt="heren" class="fototransition"/>

                <div class="mask">
                    <a href="heren.html"><h2>heren</h2></a>
                </div>
    </div>


   .mask > a > h2{
        text-transform:uppercase;
        margin-top:4.2vw;
        font-size:2em;
        font-family:HelveticaNeue-UltraLight;
    }

我也有像这样的导航

    <nav>
        <a href="index.html">home</a>
        <a href="register.html">register</a>
    </nav>

    a:hover{
        color:#f5a401;
        text-decoration:underline;
    }

这就是我的问题：当我将h2文本悬停在掩码中时，它会将悬停元素从a：hover复制到h2元素。

我试了这个没有成功：

    .masker > a:hover > h2{
    text-decoration:none;
    }

提前致谢！

Ps：这是我的第一个问题，如果我犯了任何错误，请原谅。

Answer 1

您在导航中使用:hover规则的选择器正在选择页面上的所有锚点。您需要调整为仅选择作为nav标记后代的锚点，如下所示：

nav a:hover

H1链接从nav复制不需要的属性

1 个答案: