Css 菜单中的OnMouseOver图像问题

我一直试图在用户登录并将鼠标移到包含Cog图像的菜单项上时，使Cog图像正确显示。如果能在这方面得到任何帮助，我将不胜感激

这是小提琴，你可以看到问题：

只有在用户登录后，小齿轮图像才会显示在用户名旁边

以下是开发站点：

用户ID:test4 密码：ninja71

当用户登录并且您将鼠标移到包含Cog图像的按钮上时，背景颜色将变为红色，但是您无法看到Cog图像。
我不知道如何解决这个问题

onMouseOut能够看到Cog图像：

onMouseOver无法看到Cog图像：

每当用户登录时，他们都在LoggedInTemplate中。包含Cog图像的锚定标记还具有LoginName.Net控件，该控件显示用户名：

以下是菜单的代码：

<div id="menu2">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
  <AnonymousTemplate>
      <ul id="solidmenu" class="solidblockmenu">
         <li><a href="~/default.aspx" runat="server">Incinio</a></li>
         <li><a href="~/empresa.aspx" runat="server">Empresa</a></li>
         <li><a href="~/webgrupodotnet.aspx" runat="server">Deserollo</a></li>
         <li><a href="~/webgrupodiseno.aspx" runat="server">Diseno</a></li>
         <li><a href="~/webgrupomovil.aspx" runat="server">Moviles</a></li>
         <li><a href="~/asociados.aspx" runat="server">Asociados</a></li>
         <li><a href="~/contacto.aspx" runat="server">Contacto</a></li>
         <li><a href="~/Account/Registrar.aspx" id="Registrar" runat="server">Registrar</a></li>
         <li><a href="~/Account/Login.aspx" id="HeadLogin" runat="server">Log-In</a></li>
      </ul>
  </AnonymousTemplate>
  <LoggedInTemplate>
      <ul id="solidmenu" class="solidblockmenu">
         <li><a href="~/default.aspx" runat="server">Incinio</a></li>
         <li><a href="~/empresa.aspx" runat="server">Empresa</a></li>
         <li><a href="~/webgrupodotnet.aspx" runat="server">Deserollo</a></li>
         <li><a href="~/webgrupodiseno.aspx" runat="server">Diseno</a></li>
         <li><a href="~/webgrupomovil.aspx" runat="server">Moviles</a></li>
         <li><a href="~/asociados.aspx" runat="server">Asociados</a></li>
         <li><a href="~/contacto.aspx" runat="server">Contacto</a></li>
         <li>
            <span style="width: 25px;">
                <asp:LoginStatus ID="headloginstatus" runat="server"   LogoutAction="redirect" LogoutText="log out" LogoutPageUrl="~/" />
            </span>
         </li>
         <li><a href="~/Account/ModifyAccount.aspx"class="modifyuser">
                &nbsp;&nbsp;Hola!
                <span style="font-size:13px; padding-left:1px">
                   <asp:LoginName ID="headloginname" runat="server" />
                </span>
             </a>
         </li>          
      </ul>
  </LoggedInTemplate>
</asp:LoginView>
</div>

以下是registrrse.css，其中包含.modifyuser类，该类具有Cog图像：

.modifyuser{
    background: url("/images/home/moduser2.png") no-repeat 4px 8px; 
    display: block;
    font-size: 13px;
    text-align: center;
}  

---

问题在于此规则覆盖了以cog为背景的

.modifyuser

样式

.solidblockmenu li a:hover, .solidblockmenu li a.selected {         /*Selected Tab style*/
    color: white;
    background: transparent url("http://i.imgur.com/mjYcj.gif") center center repeat-x;
}

您可以将其更改为此，但随后将失去红色效果

.solidblockmenu li a:hover:not(.modifyuser), .solidblockmenu li a.selected {         /*Selected Tab style*/
    color: white;
    background: transparent url("http://i.imgur.com/mjYcj.gif") center center repeat-x;
}

---

除此之外，您还必须向服务器添加一个元素作为cog。它可以是一个img，或者一个具有绝对定位的div，并将父对象设置为相对定位。

我不确定这是否是最干净的方法，因为正如您所看到的，我的边距为-12px，背景图像的边距为-2px

我从以下位置修改了.modifyuser类：

.modifyuser {
    background: url("/images/home/moduser2.png") no-repeat 4px 8px;
    display: block;
    font-size: 13px;
    text-align: center;
}

要像这样使用跨度，请执行以下操作：

a.modifyuser span {       
    background: url("/images/home/moduser2.png") no-repeat scroll -2px -1px transparent;
    margin-left: -12px;     
    padding: 0 0 0 20px;
    font-size:13px 
} 

以下是标记：

<li><span>
    <a href="~/Account/ModifyAccount.aspx" class="modifyuser">
        <asp:LoginName ID="headloginname" runat="server" />
    </a>
    </span>
</li>

我认为这不是服务器端的问题，因此ASP标记没有帮助。您可以发布不同的HTML输出（loogin out/logged in）吗？@yunzen这两幅图像描述了登录和未登录的场景。@yunzen I实际上解决了菜单按钮文本对齐问题，因为在.modifyuser类中，高度被指定为19px。我仍然有一个问题，cog图像没有显示在MouseOverpul上是对的，在同一个对象上有两个css图像。每次将鼠标悬停在cog上时，实际上是在用另一个bg图像替换cog的bg图像。你应该添加一个或改变一个不同的标签。事实上，所有锚定标签的红色效果都丢失了，这是行不通的。您还提到我可以有一个Div或Img服务器标记，它将替换.modifyuser类中定义的Cog图像。我不确定我是否遵循了将其父对象设置为相对位置的部分。父母是什么？

<li><span>
    <a href="~/Account/ModifyAccount.aspx" class="modifyuser">
        <asp:LoginName ID="headloginname" runat="server" />
    </a>
    </span>
</li>