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 tooltips (sort of)
Learning CSS
Fading background
CSS or Javascript?
How to make a Html post in Phpnuke
CSS a:hover and tables problem. Help really needed?
150 frh$ for menubar Please CLOSE
Browsers battle (FF, IE, OP) and CSS
help needed with css & javascript
css hover
Change background of a DIV (no JS)
simple dhtml effect help
Need Idea to create a website
Menu Button with css
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.