Hi
On my site i did this:
#navigation li a:hover { background-image:url(../images/hoover-btn.png);
color:#0af915;}
}
li#current li a:link, li#current li a:visited {
color: #0af915;
}
You can have a look, hoover changes only background button and text color,
after that it remains text color
http://tk-studio-design.webhop.org/Joomla/ under development( at the
moment) with IE6 issues and IE7 layout problems......
and no words about http://tk-studio-design.webhop.org :))
Tom
On Sat, Aug 28, 2010 at 5:43 PM, Martin <[email protected]> wrote:
> On 08/28/2010 02:57 PM, Kevin Rodenhofer wrote:
>
>> Yeah. a:active doesn't do that. There is, however, a neat trick I found
>> somewhere that will do this for you.
>>
>> First, on each and every page represented in the navigation, you have to
>> give the body tag an id like:
>>
>> <body id="home"> or <body id="products"> Whatever the page is...
>>
>> Then, in the navigation you need a separate id for each navigation element
>> (I'm just showing the hrefs):
>>
>> <a href="/" id="homenav">Home</a> or <a href="products.htm"
>> id="productsnav">Products</a> and so on...
>>
>> Then, in your CSS you need:
>>
>> body#home a#homenav,
>> body#services a#productsnav {
>> background: rgb(212,201,182); <--- substitute whatever color you want here
>> (make sure it's different than the default color)...
>> }
>>
>> You can see how you'd add additional pages...
>>
>> Now, when you navigate to a page, the associated link/button is
>> highlighted.
>>
>> Hope this helps...
>>
>>
>> On 8/28/2010 11:12 AM, Martin wrote:
>>
>>> Hi there,
>>>
>>> I've been googling for it and a:active doesn't work as I'd like it to.
>>>
>>> I've got a menu. When I hover over a menu item the colour changes to
>>> orange. I'd like it
>>> to stay orange as long as I'm on this particular page for visitors to
>>> know where they are at the moment.
>>>
>>> That's my css:
>>> ===============================
>>> ul.nav {
>>> margin: 0;
>>> padding: 0;
>>> list-style: none;
>>> width: 100%;
>>> overflow: hidden;
>>> /* background: url(images/menu-background-grey.gif) repeat-x; */
>>> }
>>> ul.nav li {
>>> float: right;
>>> }
>>>
>>> ul.nav a {
>>> display: block;
>>> padding: 0 2em;
>>> line-height: 40px;
>>> text-decoration: none;
>>> background: url(images/divider1.png) repeat-y right top;
>>> color: grey;
>>> }
>>>
>>> ul.nav a:hover, ul.nav a:focus {
>>> color: orange;
>>> }
>>>
>>> =======================
>>>
>>>
>>> I tried the following:
>>>
>>> ul.nav a: hover, ul.nav a:focus, ul.nav a:active {
>>> color: orange;
>>> }
>>>
>>> but it doesn't work like I thought. The moment I remove the mouse pointer
>>> from the link, it goes
>>> back to gray.
>>>
>>> Thank you
>>> ______________________________________________________________________
>>> css-discuss [[email protected]]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>>
>>>
>>>
>> ______________________________________________________________________
>> css-discuss [[email protected]]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
>
> Thanks a lot guys
>
> I can move on with the website now.
>
> regards
> martin
>
> ______________________________________________________________________
> css-discuss [[email protected]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
