FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS - li on hover change a color





DanielXP
I want to change the color of the text in a a tag when the li tag (what the a tag is in) has the mouse over.

Code:
<ul class="nav">
<li class="conbgn linav"><a href="http://google.com">My Account</a></li>
<li class="conbgn linav"><a href="http://yahoo.com">Messages [0]</a></li>
<li class="conbgn linav"><a href="http://rmb-arcade.com">Logout</a></li>
</ul>


is my HTML code

and this is my CSS code

Code:
a {
color:#333333;
text-decoration:none;
}

a:hover {
text-decoration: underline;
}

.conbgn {
background-color:<?=$color1?>;
padding:4px;
}

.conbgn:hover {
background-color:#7A7A7A;
color:#FFFFFF;
font-weight:bold;
}

ul {
margin:0;
padding:0;
}

ul.nav {
list-style:none;
color:#FFFFFF;
}

li.linav {
color:#FFFFFF;
}

li.linav:hover {
color:#FFFFFF !important;
}

li {
margin:0px;
padding:0px 0px 0px 7px;
}

li a {
text-decoration:none;
}

li a:hover {
text-decoration:none;
color


I know when you hover over the a in the li it changes to white but is it possible to change it from when you hover over the li?


thanks
guitarcrazy087
Yes yes, that's quite possible! This is the little trick. It took me forever to find it when I was trying to do essentially the same thing.

li a {
whatever
}

li:hover a {
whatever
}

so just put the link colors and tributes in there and it should work. Use the "li:hover a" as the "a:hover".

Hope this helps!
sonam
Quote:
li:hover a {
whatever
}


I am not sure this is working in IE6 and some other older browser because they did't recognise object hover command. But you can look for simple trick how to solve this with few line of JavaScript on:
http://www.alistapart.com/articles/dropdowns

Sonam
Related topics
CSS - CSS Tutorial for skin maker
CSS problem...
CSS or Javascript?
CSS mismatch IE <> Firefox
Css problem
CSS a:hover and tables problem. Help really needed?
CSS help needed with list style menubar
150 frh$ for menubar Please CLOSE
css hover
My First CSS Tutorial
Change background of a DIV (no JS)
How to..??
Menu Button with css
drop right down menu
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.