Javascript 鼠标悬停时内部DIV颜色文本未更改

这是我的要求：

 <div id="outerElementsContainer">
 <div id="123456" name="123456"    onMouseOut="this.style.background='WHITE';this.style.color='GREEN';"
onmouseover="this.style.background='GREEN';this.style.color='WHITE';"
style="float:left; margin-right:2em;cursor: pointer;   color:'GREEN';width:18em;height:12em; 
  border-color:'GREEN'; border-width:1px;margin-top: 1em;      border-style:solid;">

                     <div id="InnerDiv1" 
                     style="background-color:'GREEN';height:0.5em;margin-bottom: 10px;">
                     </div>

                     <div id="InnerDiv2"
                     style="height: 3.5em; overflow: hidden;margin-left: 0.5em;font-size: larger;font-weight: bold;">
                         <p id="title">Title</p>
                     </div>

                     <div id="InnerDiv3" 

                     style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
                         <p id="Description">Description</p>
                     </div>
                 </div>  

             </div>

我有“Ttile”和“Description”

在页面加载时，“outRelationsContainer”（DIV ID）DIV background应该 变白

“标题”和“边框”颜色应为绿色，“说明”颜色应为 要黑的

鼠标悬停在“OutRelationsContainer”（DIV ID）DIV上，DIV 背景应该变为绿色

“标题”颜色应改为白色，“说明”颜色应改为白色 换成白色

鼠标离开“OutRelationsContainer”（DIV ID）DIV，DIV background 应该换成白色

“标题”和“边框”颜色应更改为绿色，“说明”颜色 应该换成黑色

我被“描述”颜色卡住了。鼠标悬停时颜色不会改变。

下面是我的HTML代码：

 <div id="outerElementsContainer">
 <div id="123456" name="123456"    onMouseOut="this.style.background='WHITE';this.style.color='GREEN';"
onmouseover="this.style.background='GREEN';this.style.color='WHITE';"
style="float:left; margin-right:2em;cursor: pointer;   color:'GREEN';width:18em;height:12em; 
  border-color:'GREEN'; border-width:1px;margin-top: 1em;      border-style:solid;">

                     <div id="InnerDiv1" 
                     style="background-color:'GREEN';height:0.5em;margin-bottom: 10px;">
                     </div>

                     <div id="InnerDiv2"
                     style="height: 3.5em; overflow: hidden;margin-left: 0.5em;font-size: larger;font-weight: bold;">
                         <p id="title">Title</p>
                     </div>

                     <div id="InnerDiv3" 

                     style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
                         <p id="Description">Description</p>
                     </div>
                 </div>  

             </div>

标题
说明

如何解决这个问题？？？

使用css：

#description:hover{
 background-color: green;
color: black;
}

当鼠标位于id为

123456

的div上方时，背景颜色将变为绿色，当鼠标未位于div上方时，背景将变为白色

见-

---

要使用CSS，可以创建一个.CSS文件，并将其包含在html页面的

部分，就像这样-

您还可以删除CSS属性

color:black

：

<div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
<p id="Description">Description</p>
</div>

说明

到

说明

您只能使用css执行此操作：

body{color:black；}
#OutRelationsContainer>div{
浮动：左；
右边距：2米；
光标：指针；
颜色：“绿色”；
宽度：18em；
高度：12公分；
边框：实心1px绿色；
}
#内部部门2{
高度：3.5公分；
溢出：隐藏；
左边距：0.5em；
字体大小：较大；
字体大小：粗体；
}
#InnerDiv2 p{color:green；}
#内部部门3{
高度：5em；溢出：隐藏；边距：0.5em；
}
#OutRelationsContainer:悬停>div{
背景：绿色；
边框：绿色1px绿色；
颜色：白色；
}
#OutRelationsContainer:悬停p{
颜色：白色；
}

标题
说明

请参见InnerDiv3 div中的描述，您将应用于内嵌css颜色：黑色和内嵌css具有更高的优先级，这就是颜色不变的原因

我已经在下面使用jquery编写了一个简化的解决方案，满足了您的需求

$（文档）.ready（函数（e）{
$（“#123456”）.mouseover（函数（e）{
$（“.greenColor”）.css（“背景色”、“绿色”）；
$（“.blackColor”）.css（“颜色”、“黑色”）；
$（“.whiteColor”）.css（“颜色”、“白色”）；
});
$（“#123456”）.mouseleave（函数（e）{
$（“.greenColor”）.css（“背景色”、“白色”）；
$（“.blackColor”）.css（“颜色”、“绿色”）；
$（“.whiteColor”）.css（“颜色”、“黑色”）；
});
})；

.greenColor{}.blackColor{}

标题
说明

试试这个。我想这就是你想要的。如果不是这样，告诉我。我为你写了完整的代码。只需复制、粘贴并尝试一下

第3部分{
宽度：500px；
高度：500px；
背景色：白色；
边框：1px纯绿色；
文本对齐：居中；
}
h1.ttl{
颜色：绿色；
}
h1.des{
颜色：黑色；
}
一班{
背景颜色：绿色；
}
.二班{
颜色：白色；
}
标题




描述
$（文档）.ready（函数（）{
$（“.outerement”）.mouseenter（函数（）{
$（this.css（{“背景色”：“绿色”}，1000）；
$（“.ttl”）.css（{“color”：“white”}，1000）；
$（“.des”）.css（{“color”：“white”}，1000）；
});
$（“.outerement”）.mouseleave（函数（）{
$（this.css（{“背景色”：“白色”}，1000）；
$（“.ttl”）.css（{“颜色”：“绿色”}，1000）；
$（“.des”）.css（{“color”：“black”}，1000）；
});
});

谢谢你们提供的答案。有些答案对我没有帮助，它从我的要求中挑选出了一些其他东西。Graham和Jai主要感谢你们。我是不是把这个问题当作一个没用的问题来发帖？然后我就陷入了困境，好像我做错了一样

<div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;">
<p id="Description">Description</p>
</div>