[RESOLVED]Hover to Change Background Image

I have an ASP.NET menu control that worked when left to the default  RenderingMode=Table.  But, in order to comply with the WCAG 2.0 I switched it to  RenderingMode=List.  I can not change ASP.NET from 2 to 4.  It must stay at 2, unfortunately.

Upon changing the menu control to  RenderingMode=List all the menu related WCAG errors went away, but so did the background image functionality.  When a user hovers over a list item of my menu, the background image should change – but that no longer works.
 I didn’t bother submitting the site map file because I don’t think it is relative.  Here is the important code:

<asp:Menu RenderingMode="list" ID="aspMenu"  runat="server" StaticDisplayLevels="1" DataSourceID="SiteMapDataSource1"
                        Orientation="Horizontal" StaticEnableDefaultPopOutImage="False" DynamicPopOutImageUrl="~/images/menuarrow.gif" DynamicHorizontalOffset="25" >
                        <LevelMenuItemStyles>
                            <asp:MenuItemStyle CssClass="menu-level1" HorizontalPadding="25" VerticalPadding="4" />
                            <asp:MenuItemStyle CssClass="menu-level2" HorizontalPadding="25" VerticalPadding="4" />
                            <asp:MenuItemStyle CssClass="menu-level3" />
                            <asp:MenuItemStyle CssClass="menu-level4" />
                        </LevelMenuItemStyles>
                        <DynamicMenuStyle CssClass="aspmenudiv" />
                        <DynamicHoverStyle CssClass="menu-dynamichoverstyle" ForeColor="White" />
                        <StaticHoverStyle CssClass="menu-statichoverstyle" ForeColor="White" />
                        <LevelSubMenuStyles>
                            <asp:SubMenuStyle CssClass="sublevel1" />
                        </LevelSubMenuStyles>
                    </asp:Menu>

/* -------- asp:menu -------------------------- */

.menu-level1, .menu-level2, .menu-level3, .menu-level4
{
    padding: 3px;
    color: #ffffff;
    font: bold 14px Tahoma, Geneva, Verdana, sans-serif;
    border-left-style: solid;
    border-left-width: 0px;
    border-left-color: #044774;
    border-top-color: #044774;
    border-top-style: solid;
    border-top-width: 0px;
    text-align: left;
	z-index:99999;
}

.menu-level1 td a:link, .menu-level2 td a:link,.menu-level3 td a:link,.menu-level4 td a:link
{
    color: #ffffff;
	z-index:99999;
}

.menu-level1 td a:visited, .menu-level2 td a:visited,.menu-level3 td a:visited,.menu-level4 td a:visited
{
    color: #ffffff;
	z-index:99999;
}

.menu-level1
{

	background-image:url('menu_button_level1.jpg'); 
    margin:[0][0][0][0][0];
    font-size: 12px;
    width: 120px;
    text-align: center;
    font-weight: bold;
	z-index:99999;
}

.menu-level1 td a:active
{
    color: #C6D0E4;
	z-index:99999;
}

.menu-level2
{
	background-image:url('menu_button_level1.jpg');
    font-size: 11px;
   	z-index:99999;
}

.menu-level3
{
    background-color: #4C4C4C;
    font-size: 10px;
	z-index:99999;
}

.menu-level4
{
    background-color: #595959;
    font-size: 10px;
	z-index:99999;
}
       
.sublevel1
{
	background-image:url('menu_button_level1.jpg');
    font-variant: small-caps;
    font-size: xx-small;
	z-index:99999;
}

.menu-statichoverstyle, .menu-dynamichoverstyle
{
    font-weight: bold;
	background-image:url('menu_button_level1_hover.jpg');
    color: white;
   	z-index:99999;
}

/* aspmenudiv sets the z-index for the ASP:Menu control so it appears over other controls */
.aspmenudiv
{
	z-index:99999;
	position:relative;
}

.aspmenudiv a
{	
	width:98%;
	display:inline-block;
}

/* -------- End Menu -------------------------- */

Does anyone spot the problem?  I have been goofing with this for hours.  Please help!

Without digging into it too deeply, you might want to change the following section of your CSS : 

margin:[0][0][0][0][0];

to : 

margin: 0;

This may not be the issue at all, but it seemed like a prime opportunity for a syntax error. Could you post the actual source that is getting rendered for your menu? This could simply be a case of the rendered source from your ASP.NET Controls not generating
what you might expect within your CSS. This could also have an issue to do with the location of your actual images in relation to your CSS file (as all images that are referenced within a CSS file are relative to the CSS file itself).

Margin: 0; didn’t work.  Thanks for the idea.

Here is some of the source code:

<div class="aspmenudiv">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr style="background-image: url('../App_Themes/Blue/menu_button_level1.jpg')">
                <td colspan="2" align="center">
                    <a href="#ctl00_aspMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=aoNHAu9YtRmDUwTqd8xGPvqr7obHWxpP0dyNGmhjOL2MLzCn8sPVEODsCBnVPT1leP99XcDgQx59g0wEvZ6EeLE3OIo1&amp;t=634773866700000000" width="0" height="0" style="border-width:0px;" /></a><div id="ctl00_aspMenu">
	<ul class="level1 sublevel1">
		<li><a title="Home" class="level1 menu-level1" href="/secure/PatientChannel2.aspx?page=desktop">Home</a></li><li><a class="level1 menu-level1">Profile</a><ul class="level2 aspmenudiv">
			<li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=registration&amp;newpage=yes">Patient Profile</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=myfamily">My Family</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=addprofile&amp;newpage=yes">Add Family Member</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=sharehealthinformation&amp;newpage=yes">Share Health Information</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=exportmedicalhistory">Print Medical History</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=usersetting">Settings</a></li>
		</ul></li><li><a class="level1 menu-level1">Healthcare Requests</a><ul class="level2 aspmenudiv">
			<li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=inbox&amp;newpage=yes">Messages</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=evisitmenu&amp;newpage=yes">eVisits</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=appts&amp;newpage=yes">Appointments</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=docs&amp;newpage=yes">Document Center</a></li><li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=inbox&amp;params=submitforms&amp;params2">Submit Health Forms</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=prescriptions">Prescription Refills</a></li>
		</ul></li><li><a class="level1 menu-level1">Health Records</a><ul class="level2 aspmenudiv">
			<li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=clinicalsummary">Clinical Summary</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=labs">Laboratory</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=vitals&amp;newpage=yes">View Vitals</a></li><li><a class="level2 menu-level2" href="/Secure/PatientChannel2.aspx?page=vitalsoption">Add Or Edit Vitals</a></li>
		</ul></li><li><a class="level1 menu-level1">My Providers</a><ul class="level2 aspmenudiv">
			<li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=provider&amp;newpage=yes">Manage Providers</a></li><li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=inbox&amp;params=submitforms">Submit Health Forms</a></li>
		</ul></li><li><a class="level1 menu-level1">Resources</a><ul class="level2 aspmenudiv">
			<li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=news">News/Updates</a></li><li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=feedback">Feedback</a></li><li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=contact">Contact Us</a></li><li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=helpfile">Help</a></li><li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=survey">Survey</a></li><li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=bloodsugarlog">Blood Sugar Log</a></li><li><a class="level2 menu-level2" href="/secure/PatientChannel2.aspx?page=accountactivity">Account Activity</a></li>
		</ul></li>
	</ul>
</div><a id="ctl00_aspMenu_SkipLink"></a>
                </td>
                <td align="right">
                </td>
            </tr>
        </table>

Forgot to mention, the css and the image files are in the same folder.

Is that the info you needed, Rion?

hi Tualatin,

You can try to use "background-position".

I would suggest that you read this reference below:

Changing Background Images on Hover

http://stackoverflow.com/questions/14803616/changing-background-images-on-hover

Change background image on hover

http://stackoverflow.com/questions/18228248/change-background-image-on-hover

hope it helps!

Hi,

If not solved, I woud suggest to turn to the dev tools in your browser to inspect the markup and see which styles are applied. More likely as the HTML markup changed, some of your CSS rules are not applied anymore and likely requires a selector change.

Leave a Reply