覆盖样式：悬停

Question

我正在创建一个收件箱，其中我会在侧面使用asp菜单，在中心使用收件箱。当我从数据库中看到一个新行时，我需要将字体颜色更改为红色并使其变为粗体。我在菜单项上使用了adding。

如果不是徘徊，它看起来像这样。

如果悬停它必须看起来像这样。

但问题是，当我将鼠标悬停在文本上时，它看起来就像上面显示的图像，但如果我稍微悬停在menuItenm的顶部或底部（在菜单项内部但不在文本上），那么这看起来像此

用于菜单项的CSS。

.Menu ul li a {
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;}

.Menu ul li a:hover{
background-image: none;
color: white;
background: #424242;}

以下是我用来更改颜色的代码，并将字体设置为粗体从服务器端。

Menu1.Items[0].Text = "<div class='inboxno' >" + "Inbox (" + (i + 1) + ")" + "</div>";

这是收件箱的CSS类。

.inboxno{
background-image: none;
color: Red;
font-weight:bold;}

.inboxno:hover{
background-image: none;
color: white;
background: #424242;
font-weight:bold;}

我想我明白了这个问题。是的，在菜单项内的收件箱文本周围创建<DIV>，它具有Css inboxno。但菜单项有填充，当我将鼠标放在填充区域时，inboxno：悬停类没有应用于Div。

我认为这个问题的解决方案之一是，如果我可以从.Menu ul li a类访问.inboxno:hover类，我将删除{{1}中的填充属性并设置相同的填充属性} class。

但我不知道如何从.inboxno:hover班级访问.Menu ul li a班级。

你能帮助我吗？

Answer 1

不确定您是否只是询问悬停与否，但请尝试

.Menu ul li:hover a {
    background-image: none;
    color: white;
    background: #424242;
}