css - 菜单中的 OnMouseOver 图像问题

Question

我一直在尝试让 Cog 图像在用户登录时正确显示，并将鼠标悬停在包含 Cog 图像的菜单项上。我将不胜感激。

这是 Fiddle，您可以看到问题:http://jsfiddle.net/NinjaSk8ter/V9nBZ/

只有在用户登录后，小齿轮图像才会出现在用户名旁边。

这是开发网站:http://www.virtualpetstore.com

用户ID:test4密码:ninja71

当用户登录并且您将鼠标悬停在包含齿轮图像的按钮上时，背景颜色变为红色，但是您看不到齿轮图像。
我不确定如何解决这个问题。

onMouseOut 能够看到齿轮图像:

onMouseOver 无法看到齿轮图像:

只要用户登录，他们就会在 LoggedInTemplate 中。包含 Cog Image 的 Anchor Tag，也有 LoginName .Net Control，显示用户名:

这是菜单的代码:

<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>

这是此菜单的 ddmenu.css，它具有将背景颜色更改为红色的 .solidblockmenu li a:hover 类:

.solidblockmenu {
margin: 0 0 0 0;
padding: 0 0 0 0;
float: left;
font: bold 13px Arial;
/*width: 672px;*/
width: 872px;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url("http://i.imgur.com/iTqzs.gif") center center repeat-x;
}

.solidblockmenu li {
display: inline;
color: #C3C2C2;
}

.solidblockmenu li a{
float: left;
color: #C3C2C2;
padding: 8px 20px 8px  20px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited {
color: #C3C2C2;
}

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

这是包含 .modifyuser 类的 registrarse.css，该类具有 Cog 图像:

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

Answer 1

问题是这条规则覆盖了 .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;
}

除此之外，您必须向服务器添加一个元素作为齿轮。可以是img，也可以是绝对定位的div，parent设置为相对定位。