Hover Question

[nickolas80]

Since IE apparently only supports Hover on A: (links), is there any
way, using CSS to get a background color changing effect on a DIV or TD?

 

[Jonathan N. Little]

Since IE apparently only supports Hover on A: (links), is there any
way, using CSS to get a background color changing effect on a DIV or TD?

1. Javascript
2. Put a link in it
3. Pin you hopes and dreams on that IE7 will support it ;-)

 

[Mark Parnell]

Since IE apparently only supports Hover on A: (links), is there any
way, using CSS to get a background color changing effect on a DIV or TD?

Only if you have an anchor in that <div> or <td> that fills the whole
thing.

There are javascript workarounds. Or you can wait until IE7 comes out.

 

[Alan J. Flavell]

1. Javascript
2. Put a link in it
3. Pin you hopes and dreams on that IE7 will support it ;-)

Speaking to your point (2): is there, in fact, a way to get the properties
of a "DIV or TD" to change by "putting a link in it"? Some properties are
only applicable to a block-level element, which the "a" element is not.
Presumably if you want those properties to be changed by hover in IE,
using your method (2), you'd have to transfer the properties in question
to the "a" element *and* change the "a" to "display: block". Any chance
of a practical demonstration of that in action, please?


But there /is/ a fourth option:

4. Conclude that CSS is designed to be optional, and IE simply chooses not
to take this particular option. "Working as designed".

 

[Jonathan N. Little]

Speaking to your point (2): is there, in fact, a way to get the properties
of a "DIV or TD" to change by "putting a link in it"? Some properties are
only applicable to a block-level element, which the "a" element is not.
Presumably if you want those properties to be changed by hover in IE,
using your method (2), you'd have to transfer the properties in question
to the "a" element *and* change the "a" to "display: block". Any chance
of a practical demonstration of that in action, please?

As to #2 you cannot get IE to hover thoses elements, so use a link,
adjust style to fill container, set the links background to simulate the
effect. Didn't say it was ideal but it is 'doable'

But there /is/ a fourth option:

4. Conclude that CSS is designed to be optional, and IE simply chooses not
to take this particular option. "Working as designed".

Or MS is neither concerned with supporting a spec that they do not have
patent control of nor making we designers life a bit easier! ;-)

 

[Nick Theodorakis]

Only if you have an anchor in that <div> or <td> that fills the whole
thing.

Furthermore (at least for IE6) the anchor must contain a link for IE
to display the properties of the :hover psuedoclass. An empty anchor,
or even a named anchor, won't do it.

But speaking to the larger question; even if most popular browsers (or
browser-like OS elements) will display the properties of the :hover
pseudoclass on any element, would it be wise to apply them? It seems
to me that users are becoming accustomed to associating the :hover
properties with hyperlinks. Just as it would be valid, but unwise, to
make ordinary text appear blue and underlined (even if the author
might have good reason for doing so) I suggest it would also be
unwise to apply :hover properties to anything except links.

Nick

 

[Alan J. Flavell]

But speaking to the larger question; even if most popular browsers (or
browser-like OS elements) will display the properties of the :hover
pseudoclass on any element, would it be wise to apply them? It seems
to me that users are becoming accustomed to associating the :hover
properties with hyperlinks. Just as it would be valid, but unwise, to
make ordinary text appear blue and underlined (even if the author
might have good reason for doing so) I suggest it would also be
unwise to apply :hover properties to anything except links.

This is good advice in itself, indeed, but I think it missed the point.
Or at least it did as far as my bit was concerned.

Here I inherited a page that went something like this - in the scope of a
class let's say "mymenu":

<td><div><a href="...">text</a></div></td>

The desire was to specify a :hover behaviour *for the link* which involved
also some CSS properties that are only valid for block-level elements.
The associated CSS wanted, really, to specify something like

.mymenu div:hover { "border-color change" }

and this would've worked on Mozzi etc. - but not on MessIE.

So the author of this lump of code had instead used an "onmouseover/
onmouseout", calling out some javascript in the HTML. For every
goddamned cell in this column of the menu. It was just too much.

That's why I was interested to know (haven't managed to get it to work
myself yet) whether MessIE could be persuaded to do this on the a:hover
itself - if only one could define the "a" as a block-level element within
its TD.


I'll be honest - myself I think this hover stuff is just a fad, that next
year will look as dated as HTML/3.2. But the sponsor of this site is very
happy that the links are almost indistinguishable from the surrounding
text on a typical graphical browser, until one waves a mouse at them,
whereupon they light up like Blackpool Tower - won't accept any change
in its visual behaviour. Oh well - don't mind me, I'm getting old and
crabby. I'm sure the new students at whom these pages are aimed will be
impressed.

 

[Jonathan N. Little]

This is good advice in itself, indeed, but I think it missed the point.
Or at least it did as far as my bit was concerned.

Here I inherited a page that went something like this - in the scope of a
class let's say "mymenu":

<td><div><a href="...">text</a></div></td>

The desire was to specify a :hover behaviour *for the link* which involved
also some CSS properties that are only valid for block-level elements.
The associated CSS wanted, really, to specify something like

.mymenu div:hover { "border-color change" }

and this would've worked on Mozzi etc. - but not on MessIE.

So the author of this lump of code had instead used an "onmouseover/
onmouseout", calling out some javascript in the HTML. For every
goddamned cell in this column of the menu. It was just too much.

That's why I was interested to know (haven't managed to get it to work
myself yet) whether MessIE could be persuaded to do this on the a:hover
itself - if only one could define the "a" as a block-level element within
its TD.

<snip>
You can define an 'A' element as block within a TD, here is a real
hideously styled example:

TABLE {
width: 300px;
}
TD A {
display: block;
width: 90%;
height: 90%;
background-color: blue;
color: yellow;
border: 3px inset blue;
text-decoration: none;}
TD A:hover {
background-color: yellow;
color: blue;
border: 3px outset yellow;
}

<table>
<tr><td><a href="#">Test One</a></td></tr>
<tr><td><a href="#">Test Two</a></td></tr>
</table>

 

[Alan J. Flavell]

You can define an 'A' element as block within a TD, here is a real hideously
styled example:

TABLE {
width: 300px;
}
TD A {
display: block;
width: 90%;
height: 90%;
background-color: blue;
color: yellow;
border: 3px inset blue;
text-decoration: none;}
TD A:hover {
background-color: yellow;
color: blue;
border: 3px outset yellow;
}

<table>
<tr><td><a href="#">Test One</a></td></tr>
<tr><td><a href="#">Test Two</a></td></tr>
</table>

Gosh, and it *does* work in IE. Seems that what I'd been trying was
somehow different. You give me fresh hope of getting the actual
requirement to work.

Thanks for your help.