Css Div未正确显示悬停功能

我在一个包含div的div中有两个div

其中第一个将有一个单词用作菜单项，第二个将有一个背景色

我为背景创建了一个悬停样式，当鼠标悬停菜单项时，该样式将改变该div的不透明度

我的问题是，仅当鼠标正好位于div的边缘时，才会启用悬停。只要我的鼠标稍微移动到div的内部，它就会恢复到原始的不透明度

我的风格：

.menuItemBG {
    width:100%;
    text-align: center;
    background-color:#4281b6;
    height:100%;

    /* These three lines are for transparency in all browsers. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
    opacity:.1;
    position: absolute;
}
.menuItemBG:hover {
    width:100%;
    text-align: center;
    background-color:#4281b6;
    height:100%;

    /* These three lines are for transparency in all browsers. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    opacity:.2;
    position: absolute;
}
.menuItemTitle{
    position:relative;
    color:#000;
    line-height: 27px;
    font-size: 14px;
    margin-left: 20px;
}

HTLML：

<div style="position:relative; width:208px; height:30px;">
    <div class="menuItemBG"></div>
    <div class="menuItemTitle">Test Item</div>
 </div>

测试项目

---

似乎无法确定我的错误。

当您将鼠标悬停在

菜单项标题上时，您不再将鼠标悬停在
菜单项标题上，因为它们是DOM中的同级。您可以将
：悬停
切换到包含它们的div，并以这种方式将样式应用到
menuItemBG
。如果将类
menuItem
指定给包含的div，则可以执行以下操作：

.menuItem:hover .menuItemBG {
    /* These three lines are for transparency in all browsers. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    opacity:.2;
}

注意，我没有重复定期应用于
.menuItemBG
的CSS。这是不必要的。然后将类
menuItem
添加到包含的div中：

<div class="menuItem">
    <div class="menuItemBG"></div>
    <div class="menuItemTitle">Test Item</div>
</div>

演示：
我对风格建议做了一些编辑。干杯
.menuItem {
    position: relative;
    width: 208px;
    height: 30px;
}