triggering events wtih css

[Jon Slaughter]

is it possible to trigger events with css or is it purely a static scripting
language? I have a menu that contains sub menu's and when the user clicks on
the main link I want to set the visibility to show the sub menu(and ofcourse
hide the visibility for all other sub menu's). Is the only way to
accomplish this with js or does css have some ability to handle things like
this?

Thanks,
Jon

 

[Ben C]

is it possible to trigger events with css or is it purely a static scripting
language? I have a menu that contains sub menu's and when the user clicks on
the main link I want to set the visibility to show the sub menu(and ofcourse
hide the visibility for all other sub menu's). Is the only way to
accomplish this with js or does css have some ability to handle things like
this?

This kind of thing is possible to some degree with CSS. RTFM "pseudos",
"pseudoselectors", :hover and the visibility property.

 

[Jon Slaughter]

This kind of thing is possible to some degree with CSS. RTFM "pseudos",
"pseudoselectors", :hover and the visibility property.

But how can you modify a property of some other style? e.g., If I hover over
a button I want to set the visibility property of a table.

For example, suppose I have

#SomeTable {
visibility:hidden;
}

a:hover
{
SomeTable.visibility:visible;
}

....

<table id="SomeTable">
</table>

<a href=" ">Link</a>

-----------

Can I change the properties of other styles within a style? I'll read up on
css and see if I can find the answer but I don't think of I have seen
anything like before.

Thanks,
Jon

 

[chrisv]

But how can you modify a property of some other style? e.g., If I hover over
a button I want to set the visibility property of a table.

For example, suppose I have

#SomeTable {
visibility:hidden;

}

a:hover
{
SomeTable.visibility:visible;

}

...

<table id="SomeTable">
</table>

<a href=" ">Link</a>

-----------

Can I change the properties of other styles within a style? I'll read up on
css and see if I can find the answer but I don't think of I have seen
anything like before.

Thanks,
Jon

assuming table and href are in the same div, you could probably use
class inheritance and contextual definitions to get the desired
effect.

 

[Jon Slaughter]

assuming table and href are in the same div, you could probably use
class inheritance and contextual definitions to get the desired
effect.

A site I found uses display:block and display:unknown or all child lists
inside the link. It works in IE7 and FF 2.0 but not sure about IE6. They
mention something about having to use behaviors to get it to work there but
I'm probably just going to take the easy route and require a modern browser
to view my site.

 

[Jonathan N. Little]

A site I found uses display:block and display:unknown

There is *no* property "display: known"

or all child lists
inside the link.

You cannot put "block" elements withing an "A" element.

It works in IE7 and FF 2.0 but not sure about IE6. They

Pseudo class :hover only works on "A" elements in MSIE <=6 (not sure if
7 now supports it. For MSIE your either have to supplement with
JavaScript or an HTA file.

mention something about having to use behaviors to get it to work there but
I'm probably just going to take the easy route and require a modern browser
to view my site.

DIV.peekaboo DIV { display: none; }
DIV.peekaboo:hover DIV { display: block; }


<div class="peekaboo">
The nested DIV will appear when you hover a mouse over
me in a modern web browser...
<div>Hello World!</div>
</div>

 

[Jon Slaughter]

There is *no* property "display: known"

yeah, I ment none.

You cannot put "block" elements withing an "A" element.

No, I ment that inside the lists. Each element in the list is a link or
another list.

Pseudo class :hover only works on "A" elements in MSIE <=6 (not sure if 7
now supports it. For MSIE your either have to supplement with JavaScript
or an HTA file.

Yeah, this is the issue that the site was dealing with.

DIV.peekaboo DIV { display: none; }
DIV.peekaboo:hover DIV { display: block; }


<div class="peekaboo">
The nested DIV will appear when you hover a mouse over
me in a modern web browser...
<div>Hello World!</div>
</div>

Ok, thanks. This was essentially what the code I was looking at was doing
but with lists instead. I was initially trying to use the visibility
property but that didn't work so well.

Thanks,
Jon

 

[Jonathan N. Little]

yeah, I ment none.

Good 'cuz "known" won't work.

No, I ment that inside the lists. Each element in the list is a link or
another list.

Still will have the ol'MS problem because IE will not recognize LI:hover

Yeah, this is the issue that the site was dealing with.

What site? None was referenced. I used the HTA method to attached the
DIV:hover for IE on this page that has non-js hover on diagrams if you
wish to see an example in practice:

http://www.littleworksstudio.com/Amberlithe/articles/2
Article: Finer points: What's a Rhomboid? - Amberlithe Ibizan Hounds

 

[Ben C]

But how can you modify a property of some other style? e.g., If I hover over
a button I want to set the visibility property of a table.

For example, suppose I have

#SomeTable {
visibility:hidden;
}

a:hover
{
SomeTable.visibility:visible;
}

You can put pseudos anywhere in the selector, so e.g.:

#something:hover span
{
visibility: visible;
}

Makes spans that are descendents of the hovered #something visible.

You can just about do nested pop-up menu systems with this kind of
thing.

If the hovered node and the node whose properties you want to switch are
related in ways not expressible in CSS selectors you'll need to use JS
instead.

[...]

Can I change the properties of other styles within a style?
No.

I'll read up on css and see if I can find the answer but I don't think
of I have seen anything like before.

If you mean like this:

a:hover
{
SomeTable.visibility:visible;
}

then nor have I!