提问者:小点点

当div框悬停在上面时,如何更改文本的颜色


基本上,我想知道如何使文本在我悬停在div上时也会改变颜色,这就是当前的问题:https://gyazo.com/eebe7a41d45920b86545d250b56ab7e2我已经尝试找到正确的答案一段时间了,我想知道我需要改变什么,以便在div悬停在上面的同时文本也能进入视野。 下面是我的HTML代码:

      
      <div><img src="Void Logos\discordlogo.svg" alt="" width="56" height="49" class = "NavLogo">
          <img src="Void Logos\combied11.png" alt="" width="78" height="66" class = "NavVOID">
        <div class = "NavLeftDivider"></div>
    </div>
    
  <h3 class = "PageMain" id = "NavPageVoid"><a class = "NavPageButton" href = "status.html">Void Bot</a></h3>
  <h3 class = "PageMain" id = "NavPageContact"><a class = "NavPageButton" href = "status.html">Contact Us</a></h3>
  <h3 class = "PageMain" id = "NavPageCommands"><a class = "NavPageButton" href = "status.html">Commands</a></h3>
  <h3 class = "PageMain" id = "NavPageDocumentation"><a class = "NavPageButton" href = "status.html">Documentation</a></h3>
  <h3 class = "PageMain" id = "NavPageStatus"><a class = "NavPageButton" href = "status.html">Status</a></h3>
  <div id = "NavPremiumDiv" class = "NavDivDiv">
            <h3 class = "PageMain" id = "NavPagePremium"><a class = "NavPageDiv" href = "status.html">Void Premium</a></h3>
  </div>                    
  <h3 class = "PageMain" id = "NavPageManageServer"><a class = "NavDiv" href = "status.html">Manage Servers</a></h3>
  <h3 class = "PageMain" id = "NavPageAddtoServer"><a class = "NavPageDiv" href = "status.html">Add to Server</a></h3>
  <div id = "NavManageServerDiv" class = "NavDivDiv"></div>         
  <div id = "NavAddtoServerDiv" class = "NavDivDiv"></div>          

</nav>

下面是我的CSS代码:

/* CSS Document */

.body {    
    margin: 0 !important;
    padding: 0 !important;
    background-color:#121212;
}

.NavMainDiv {
    background-color: #262626;
    height: 75px;
    width: 1920;
    border-bottom-width: thick;
    border-bottom: solid;
    border-bottom-color:#94F211;
}

.NavVOID {
    position: absolute;
    padding-top: 10px;
    padding-left: 64px;
    
}

.NavLogo {
    position: absolute;
    padding-top: 12px;
    padding-left: 5px;
    width: 56px;
    height: 50px;
    
}


.NavLeftDivider {
    background-color: #94f211;
    width: 1px;
    height: 40px;
    top: 20px;
    left: 160px;
    position: absolute;
    
}

.PageMain {
    
    font-family: Arial;
    font-style: bold;
    color: #94f211;
    font-size: 14px;
    
}


#NavPageVoid {
    position: absolute;
    padding-left: 120px;
    left: 80px;
    top: 15px;
    z-index: 54;
    
}

#NavPageContact {
    position: absolute;
    padding-left: 270px;
    left: 10px;
    top: 15px;
    z-index: 53;
    
}

#NavPageCommands {
    position: absolute;
    padding-left: 385px;
    left: 10px;
    top: 15px;
    z-index: 52;
    
}

#NavPageDocumentation {
    position: absolute;
    padding-left: 500px;
    left: 10px;
    top: 15px;
    z-index: 51;
    
}

#NavPageStatus {
    position: absolute;
    padding-left: 640px;
    left: 10px;
    top: 15px;
    z-index: 50;
}

#NavPagePremium {
    position: absolute;
    left: 18px;
    z-index: 49;
    top: -7px;
    
}

#NavPremiumDiv {
    border-radius: 12px;
    position: absolute;
    border: solid;
    border-color: #94f211;
    padding-top: 5px;
    left: 715px;
    top: 19px;
    width: 125px;
    height: 27px;
}

#NavPageManageServer {
    position: absolute;
    padding-left: 1525px;
    padding-top: 15px;
    z-index: 48;
    
}

#NavPageAddtoServer {
    position: absolute;
    padding-left: 1680px;
    padding-top: 15px;
    z-index: 47;
    
}

#NavManageServerDiv {
    border-radius: 12px;
    position: absolute;
    border: solid;
    border-color: #94f211;
    padding-top: 5px;
    left: 1513px;
    top: 19px;
    width: 125px;
    height: 27px;
}

#NavAddtoServerDiv {
    border-radius: 12px;
    position: absolute;
    border: solid;
    border-color: #94f211;
    padding-top: 5px;
    left: 1670px;
    top: 19px;
    width: 108px;
    height: 27px;
}


.MainPageDiv {
    
    
}
.MainPageTitle {
    
    font-family: Arial;
    font-style: bold;
    color: #94f211;
    font-size: 30px;
    padding-left: 320px;
    padding-top: 100px;
    
    
}

.MainPageDescription {
    
    font-family: Arial;
    font-style: normal;
    color: #94f211;
    font-size: 14px;
    padding-left: 320px;
    
    
}

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

.NavPageButton:hover {
    z-index: 50;
    color:#ABF85B;  
}

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

.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;
    text-decoration:unset;
    color: #94f211;
}




共2个答案

匿名用户

你可以这样做

div.NavDivDiv:hover h3.PageMain a{
    color:white
}

在父级悬停时,可以向子级添加样式

匿名用户

这对我很有效:

null

.NavDivDiv:hover a{
   color:black;
   background-color: #94f211;
}