|
|
Posted by Jonathan N. Little on 09/18/05 01:32
Alan J. Flavell wrote:
> On Sat, 17 Sep 2005, Nick Theodorakis wrote:
>
>
>>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.
>
<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>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|