时间戳

首页 > 解决方案 > 当我将鼠标悬停在 div 上时，如何使链接和文本出现？

html - 当我将鼠标悬停在 div 上时，如何使链接和文本出现？

问题描述

基本上，我创建了一个 div，并创建了一个悬停功能，这样当我将鼠标悬停在它上面时，它会改变颜色，我如何让它同时改变 div 内文本的颜色？以及如何使链接也出现。

CSS：

.NavPageDiv:hover {
    font-family: Arial;
    font-style: bold;
    font-size: 14px;
    color: #262626 !important;
    text-decoration:none;
    background-color: #94f211;
}

.NavDivDiv:hover {
    background-color: #94f211;
    text-color: #262626;
    z-index: 90;
}

HTML：

<nav class = "NavMainDiv">
   
    <div id="NavPremiumDiv" class="NavDivDiv">
        <h3 class="PageMain" id="NavPagePremium"><a class="NavPageDiv" href="status.html">Void Premium</a></h3>
    </div>

</nav>

标签： htmlcss

解决方案

问题是你hover的.NavPageDivwhich 优先于你的 div 类。因此，删除hoverfrom.NavPageDiv并遵循我在下面的代码段中的 css。我希望这就是你要找的。 

.NavPageDiv {
    font-family: Arial;
    font-style: bold;
    font-size: 14px;
    //color: #262626;
    text-decoration:none;
    //background-color: #94f211;
}

.NavDivDiv:hover {
    background-color: #94f211;
    color: #262626
    z-index: 90;
    text-decoration:underline;
}
<nav class = "NavMainDiv">
   
    <div id="NavPremiumDiv" class="NavDivDiv">
        <h3 class="PageMain" id="NavPagePremium"><a class="NavPageDiv" href="status.html">Void Premium</a></h3>
    </div>

</nav>

推荐阅读