...

View Full Version : Link inside an <li>, need to change its color on hover



tomharto
07-25-2011, 10:43 AM
I have this code

<li class="mainMenuLi" onmouseover="showSub(1, 'block', this)" onmouseout="showSub(1, 'none', this)"><a href="/221Print"><span>221 Printing</span></a></li>

I need it so when i hover over the li the LI's background colour changes and the links text colour changes. The background colour changes fine.


#mainMenu li
{
padding:2px;
border:1px solid #de0088;
border-right:none;
width:195px;
background-color:#ffe306;
}

#mainMenu li:hover
{
background-color:#de0088;
color:#FFFF00;
border:1px solid #FFFF00;
border-right:none;
}

Its for a drop down menu and when i try #mainMenu li:hover, #mainMenu a:hover it doesnt work, because when im hovering over a sub menu the mainmenus background color stays changed but the text colour reverts to normal. Does anyone know a way i can get the text colour to stay and the desired hover colour? If i remove the <a>...</a> and just have the text the property 'color:' works, can i make the link colour use the 'color:' preoperty?

vikram1vicky
07-25-2011, 11:13 AM
You need to create a class .active assign it to menu which is clicked.

:)

tomharto
07-25-2011, 11:29 AM
The drop down menus work on mouseover not mouseclick, would active still work for that?

vikram1vicky
07-25-2011, 11:32 AM
You want keep its color changed even after mouse out?

If this is so.. then use jquery

tomharto
07-25-2011, 11:36 AM
Well when the sub menus' are display the main menu's background colour stays on the :hover colour and i need the links to stay the :hover colour too but they change back, i didnt wanna use JS but it seems im gonna have to :P

jmlwebdesign
07-25-2011, 11:40 AM
The drop down menus work on mouseover not mouseclick, would active still work for that?

vikram1vicky
07-25-2011, 11:57 AM
You have to use jquery only... and its not difficult to use.

share your navigation HTML and CSS code, I ll try to write jquery for you


:)

tomharto
07-25-2011, 12:01 PM
.active
{
color:#FFFF00;
background-color:#999999;
font-size:3em;
}


function showSub(num, what, Link)
{
var Elem = document.getElementById("sub"+num);
Elem.style.display = what;
var linK = document.getElementById(Link);
linK.setAttribute("class", "active");
}


<li class="mainMenuLi" onmouseover="showSub(1, 'block', 'main1')" onmouseout="showSub(1, 'none', 'main1')"><a id="main1" href="/221Print"><span>221 Printing</span></a></li>

For some reason when i try that code the links background colour and text size change but the colour doesnt, anyone see why?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum