基本上，我想知道如何制作它，这样当我悬停在div上时，文本也会改变颜色，这是当前的问题：https://gyazo.com/eebe7a41d45920b86545d250b56ab7e2一段时间以来，我一直试图找到正确的答案，并想知道我需要更改什么，以便在div悬停的同时显示文本。这是我的HTML代码：
<div><img src="Void Logosdiscordlogo.svg" alt="" width="56" height="49" class = "NavLogo">
<img src="Void Logoscombied11.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;
}
您可以执行此
div.NavDivDiv:hover h3.PageMain a{
color:white
}
您可以将样式添加到子项，在父项悬停上
这对我有效：
.NavDivDiv:hover a{
color:black;
background-color: #94f211;
}