Question

每当用户登录并且鼠标移动包含Cog Image的菜单项时，我一直在尝试使Cog Image正确显示。我很感激任何帮助。

这是小提琴，您可以看到问题：http://jsfiddle.net/NinjaSk8ter/V9nBZ/

小型Cog Image只有在用户登录后才会出现在用户名旁边。

以下是开发网站：http://www.virtualpetstore.com

UserId：test4 密码：ninja71

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

onMouseOut能够看到Cog Image： enter image description here

onMouseOver无法看到Cog Image： enter image description here

每当用户登录时，他们都在LoggedInTemplate中。包含Cog Image的Anchor标签也有LoginName .Net Control，它显示UserName：

以下是菜单的代码：

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

这是registrarse.css，其中包含具有Cog Image的.modifyuser类：

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

Answer 1

问题是此规则会覆盖.modifyuser的样式，它以cog为背景。

.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，并将父级设置为相对定位。

Answer 2

我不确定这是否是最干净的方法因为你可以看到我有左边距：-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>

菜单中的OnMouseOver图像问题

2 个答案: