Comments on: whatever:hover, fast and easy

By: Pathfinder

Pathfinder — Sat, 29 Mar 2008 06:21:34 +0000

Thank you so much, I was able to make drop down menus work in IE 6 with this lovely trick. I too do not like to use htc files as the cause problems on php sites and for some reason aol’s browser from time to time.

You have a very nicely laid out example. Many others drop hints, but you show it all.

Peace

By: Klaus

Klaus — Wed, 19 Mar 2008 09:47:19 +0000

The whole thing was developed for IE 6, because in IE 7 you don’t need it anyway. And the demo works perfectly for me.

By: uni

uni — Wed, 19 Mar 2008 09:06:23 +0000

But its not working in IE 6.0. Is it possible for u to give the code which will support ie 6.0 :-)

By: Klaus

Klaus — Wed, 15 Nov 2006 07:43:21 +0000

Hm, I see a lot of redundant code there and an invalid property that shouldn’t be served to browsers other than IE…

By: lkehoe

lkehoe — Tue, 14 Nov 2006 20:21:35 +0000

Thank you for the response. It did work.
Here is the code in case others may benefit from the example:

tr.agent_note_heading {
border: 1px solid #000;
padding: 2px;
m: expression(this.onmouseover = new Function(”this.className = ‘agent_note_heading-hover’;”));
font-family: verdana,lucida grande, sans-serif;
font-size: 11px;
}

tr.agent_note_heading:hover,
tr.agent_note_heading-hover {
color: black;
font-family: verdana,lucida grande, sans-serif;
font-size: 11px;

background-color: #c4e3f8;
font-weight: bold;
m: expression(this.onmouseout = new Function(”this.className = ‘agent_note_heading’;”));
}

By: Klaus

Klaus — Mon, 13 Nov 2006 20:44:59 +0000

Yes, this technique does work in IE 6, simply visit the demo with IE and test it. What is going wrong in your code is that: You declared a background for the selector tr.agent_note_heading, and for the hover background you declared just a class without a type selector: .whateverhover. Thus the first one has a higher specificity and will be applied. Change your selector to tr.whateverhover to let them have equal specificity and make sure this one succeeds the other one in your style sheet. More on selector specificity.

By: lkehoe

lkehoe — Mon, 13 Nov 2006 17:00:50 +0000

This is the corresponding html template
“); return false;’
width=100%>

By: lkehoe

lkehoe — Mon, 13 Nov 2006 16:55:34 +0000

I tried out this code and it failed to work in IE 6.0 , should this technique work for IE 6? Please see below :

tr.agent_note_heading {
background: #eaeaea;

}

tr.agent_note_heading:hover, .whateverhover {
background: #808080;
}

tr.agent_note_heading {
behavior: expression(
this.onmouseover = new Function(”this.className += ‘ whateverhover’;”),
this.onmouseout = new Function(”this.className = this.className.replace(’whateverhover’, ”);”),
this.style.behavior = null
);
}

By: Klaus

Klaus — Fri, 15 Sep 2006 19:31:39 +0000

Yes it should (although I haven’t tested it):

Standards CSS:
td:hover, td.hover { background: #eaeaea url(/path/to/your/image.png) no-repeat left top; }

IE extra:
td { behavior: expression( this.onmouseover = new Function("this.className += ' hover'"), this.onmouseout = new Function("this.className = this.className.replace(' hover', '')"), this.style.behavior=null ); }

By: Cameling

Cameling — Thu, 14 Sep 2006 19:22:58 +0000

And this works on a table cell hover? I’m sorry.. I’m not quite getting it.