Проблема с отображением OnMouseOver в меню

Question

Я пытаюсь включить изображение Cog, чтобы отображаться правильно всякий раз, когда пользователь имеет вход в систему и MouseOvers, элемент меню, содержащий изображение Cog. Я был бы признателен за любую помощь в этом.

Вот Скрипки, и вы можете увидеть проблему:. http://jsfiddle.net/NinjaSk8ter/V9nBZ/

Маленький Cog Изображение будет отображаться только рядом с именем пользователя, как только он вошел в

Вот разработка сайта: http://www.virtualpetstore.com

UserId: test4 Пароль: ninja71

Когда пользователь регистрируется, и вы MouseOver кнопку, содержащую Cog изображение, фон цвет чан es to red, однако вы не можете увидеть Cog Image.
Я не уверен, как это решить.

onMouseOut способен увидеть Cog Изображение:

OnMouseOver не умеет видеть Cog Изображение:

Всякий раз, когда пользователь регистрируется в их пределах LoggedInTemplate. Anchor Tag, который содержит зубчатое изображение, также имеет 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, который содержит класс .modifyuser, который имеет зубчатую изображение:

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

Answer 1

Я не уверен, если это самый чистый подход, потому что, как вы можете видеть, у меня есть запас налево: -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> 

Answer 2

Проблема заключается в том, что это правило переопределяет стиль .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 с абсолютным позиционированием и установить родительский объект в относительное позиционирование.