Email conversation
| From | Horvath Janos |
|---|
| To | Me |
|---|
| Subject | hover behavior IE5+ |
|---|
| Date | 5 January 2004 08:35 |
|---|
Hello!
I found the CSS2 only dinamic menu article (
http://www.howtocreate.co.uk/tutorials/testMenu.html ) on your page very
interesting. But I think the behavior can be more generic. I have created an
experimental :hover emulation behavior. In this way designer should change
the values only in CSS.
The page:
[Page using DHTML behaviours to append class names to elements when the
mouse hovers over them]
What is your oppinion?
Greetings:
Janos
| From | Me |
|---|
| To | Horvath Janos |
|---|
| Subject | Re: hover behavior IE5+ |
|---|
| Date | 5 January 2004 09:30 |
|---|
A very sensible way of doing this, but it would not work with the menus,
because they rely on the > selector
li:hover > ul
Without support the > selector, the hover effect is useless. The >
selector ensures that only the immediate sub menu is shown. Without it, the
submenus to that submenu, and any further submenus would also be shown
creating a hideous and unusable effect.
My behavior htc file also emulates the > selector, so no, my behavior file
could not be more generic.
I would recommend this for attaching your hover effect to all elements (you
can then control everything as with a normal stylesheet):
* { behavior: url(hover.htc); }
<attach event="onmouseover" handler="hoverRollOver" />
<attach event="onmouseout" handler="hoverRollOff" />
<script type="text/javascript">
function hoverRollOver() { element.className += ' hover'; }
function hoverRollOff() {
element.className = element.className.replace(/ hover$/,'');
}
</script>
| From | Horvath Janos |
|---|
| To | Me |
|---|
| Subject | Re: hover behavior IE5+ |
|---|
| Date | 5 January 2004 10:29 |
|---|
Hello!
> A very sensible way of doing this, but it would not work with the menus,
> because they rely on the > selector
li:hover > ul
Yes you are right. Sadly its only works for 2 level menus.
> I would recommend this for attaching your hover effect to all elements (you
> can then control everything as with a normal stylesheet):
* { behavior: url(hover.htc); }
I dont think its a good idea it would generate lot of init event when the
element loads and the behavior is attached to it and a lot more
moseover/mouseout events when user move the mouse.
>
function hoverRollOver() { element.className += ' hover'; }
function hoverRollOff() {
element.className = element.className.replace(/ hover$/,'');
}
This is not enough. In case when we have not only tag:hover but
tag:class:hover rules too! This is why I have some additional line of code.
Thank you for your comments and advices!
Janos
| From | Me |
|---|
| To | Horvath Janos |
|---|
| Subject | Re: hover behavior IE5+ |
|---|
| Date | 5 January 2004 16:02 |
|---|
* { behavior: url(hover.htc); }
> I dont think its a good idea it would generate lot of init event when the
> element loads and the behavior is attached to it and a lot more
> moseover/mouseout events when user move the mouse.
true. I suppose it depends on how many elements your page has, but yes,
that is a good point. IE is quite slow at multiple element events. Funny
when you think that all other good browsers manage to use CSS to monitor
hover on all elements at all times without any slowdown problems at all
using
:hover
>>>
function hoverRollOver() { element.className += ' hover'; }
function hoverRollOff() {
element.className = element.className.replace(/ hover$/,'');
}
<<<
> This is not enough. In case when we have not only tag:hover but
> tag:class:hover rules too! This is why I have some additional line of code.
I agree that what I sent will not do tag.classHover, it was just an example.
good luck with your script/CSS