CSS, disabled links

[mike509123]

Hi
I have the following two lines in my code (see below) the only difference is that the title is different in each and one is disabled while the other is not. I created a css style see below which is applied to both. Is it possible to create two css styles and have one applied to the disabled link and one applied to the enabled link? (without modifying the class name of each)

.menuItem {
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
CURSOR: hand;
}

<A class="menuItem" onmouseover="this.className='menuItem'" title="Test1" disabled onmouseout="this.className='menuItem'">
<A class="menuItem" onmouseover="this.className='menuItem'" title="Test2" onmouseout="this.className='menuItem'">

 

[Foamcow]

Not quite sure what you're trying to do here.

The links you provide here are missing an href.
They also have a class of menuItem, then it appears you are trying to apply the class of menuItem (again) when the mouse if over them and then apply it yet again when the mouseout event fires.

Why not just use a:hover instead of the pointless javascript?

a.hover {  
   FONT-WEIGHT: bold;    
   FONT-SIZE: 11px;
   CURSOR: hand;
}

I'm also not sure if the disabled property works for links. You see, a disabled link is just not a link.


--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Foamcow]

Sorry the CSS above should be

a:hover {  
   FONT-WEIGHT: bold;    
   FONT-SIZE: 11px;
   CURSOR: hand;
}

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Foamcow]

Re-reading your question and assuming the broken HTML is just a rushed example.

AFAIK the disabled attribute won't work on <a> tags. It *may* work in IE, but that's IE's fault.

You could use write a Javascript function to detect the disabled attribute but you may have to specify it like so:

<a href="something.html" disabled="disabled">My Link</a>

Or, you could totally omit the href attribute (in which case the tag becomes an anchor).
Or, just don't put an <a> around the 'link'.
Or, attach a 'return false;' to it's onclick event handler and change/append a class to make it look different.


--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[traingamer]

The disabled attribute is not supported on the <a> tag (except by IE, so tread carefully).

You could always add a second class to the disabled anchor and style it accordingly.

<A class="menuItem [COLOR=red]disabled[/color]" onmouseover="this.className='menuItem'" title="Test1" disabled onmouseout="this.className='menuItem'">
<A class="menuItem" onmouseover="this.className='menuItem'" title="Test2" onmouseout="this.className='menuItem'">

As Foamcow already noted, I'm not really sure what you're trying to do here.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[ggriffit]

You could create some JS that would review each link on the page and the ones where you had the DISABLED property set you could change the CSS class to the one you wanted.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006

http://www.greggriffiths.org/livelink/