Doesn't seem possible

[Mark Johnson]

It doesn't seem possible. But would the following also seem a
violation of the general notions behind css?

You have a DIV, say asociated with class, 'topdiv'.

Inside of that you have an anchor (and whatever it contains),
associated with class, 'a'.

Somewhere else in, 'topdiv', there is a span or element (containing
whatever), associated with class, 'b'.

Can you read the pseudo selector :hover for 'a', and somehow modify
presentation for 'b'?

..topdiv.a A:hover .b ?

The anchor element becomes a trigger for a style change to b, in other
words. It doesn't seem possible. Yet both 'a' and 'b' are in scope in
'topdiv', but outside each other's scope.

[Steve Pugh]

Re: Doesn't seem possible

Mark Johnson <102334.12@comp userve.com> wrote:
[color=blue]
>It doesn't seem possible. But would the following also seem a
>violation of the general notions behind css?
>
>You have a DIV, say asociated with class, 'topdiv'.
>
>Inside of that you have an anchor (and whatever it contains),
>associated with class, 'a'.
>
>Somewhere else in, 'topdiv', there is a span or element (containing
>whatever), associated with class, 'b'.
>
>Can you read the pseudo selector :hover for 'a', and somehow modify
>presentation for 'b'?
>
>.topdiv.a A:hover .b ?[/color]

I thought you said that the anchor was class="a"? The above selects
for anchors that are children of a.
<div>
<div class="a"><a href="">foo</a></div>
<div class="b"></div>
</div>

However if your original description was accurate then we'd be looking
at:
<div>
<a class="a" href="">foo</a>
<div class="b"></div>
</div>
[color=blue]
>The anchor element becomes a trigger for a style change to b, in other
>words. It doesn't seem possible. Yet both 'a' and 'b' are in scope in
>'topdiv', but outside each other's scope.[/color]

Sounds like a sibling selector.

a + b matches b that is a sibling (same direct parent) of a.

So you'd want (assuming the second html example above).
..a:hover + .b {styles}

But doesn't work. Doesn't work in IE because IE doesn't support
sibling selectors. Doesn't work in Mozilla and Opera because, um, not
sure, when I think about the difference between the sibling selector
and the child selector div:hover .b {styles} which does work (after a
fashion - the hover state for the div is lost as soon as the mouse
moves over any of the child elements) I start muttering rubbish about
inheritence but can't produce a coherent explantion.

Anyway, yes it looks like it's impossible with pure CSS 2. Time for
the JavaScript.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Els]

Re: Doesn't seem possible

Mark Johnson wrote:
[color=blue]
> It doesn't seem possible. But would the following also seem a
> violation of the general notions behind css?
>
> You have a DIV, say asociated with class, 'topdiv'.
>
> Inside of that you have an anchor (and whatever it contains),
> associated with class, 'a'.
>
> Somewhere else in, 'topdiv', there is a span or element (containing
> whatever), associated with class, 'b'.
>
> Can you read the pseudo selector :hover for 'a', and somehow modify
> presentation for 'b'?
>
> .topdiv.a A:hover .b ?
>
> The anchor element becomes a trigger for a style change to b, in other
> words. It doesn't seem possible. Yet both 'a' and 'b' are in scope in
> 'topdiv', but outside each other's scope.[/color]

You can put <span class="b"> inside <a class="a">, and use
positioning to make it look like it's somewhere else.

..topdiv a.a:link .b{
position:relati ve;
left:8em;
top:3em;
color:red;
}
..topdiv a.a:hover .b{
position:relati ve;
left:8em;
top:3em;
color:blue;
}

<div class="topdiv">
<a class="a">hover this<span class="b"> and see this change
colour</span></a>
</div>

Not tested!

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Chris Beall]

Re: Doesn't seem possible

Steve Pugh wrote:
[color=blue]
>
>
> Sounds like a sibling selector.
>
> a + b matches b that is a sibling (same direct parent) of a.
>[/color]

But "+" signifies 'ADJACENT sibling', so even that isn't a general
solution. The two elements would have to be adjacent and the one to be
modified would have to come second.

The following DOES work (on Netscape 7.1), but uses nested elements and
is therefore considerably more restrictive:

<style type="text/css">
..topdiv .a:hover .b {background-color: red;}
</style>
:
:
<div class="topdiv">
<a class="a" href="#dummy">T his is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>

Chris Beall

[Steve Pugh]

Re: Doesn't seem possible

Mark Johnson <102334.12@comp userve.com> wrote:
[color=blue]
>It doesn't seem possible. But would the following also seem a
>violation of the general notions behind css?
>
>You have a DIV, say asociated with class, 'topdiv'.
>
>Inside of that you have an anchor (and whatever it contains),
>associated with class, 'a'.
>
>Somewhere else in, 'topdiv', there is a span or element (containing
>whatever), associated with class, 'b'.
>
>Can you read the pseudo selector :hover for 'a', and somehow modify
>presentation for 'b'?
>
>.topdiv.a A:hover .b ?[/color]

I thought you said that the anchor was class="a"? The above selects
for anchors that are children of a.
<div>
<div class="a"><a href="">foo</a></div>
<div class="b"></div>
</div>

However if your original description was accurate then we'd be looking
at:
<div>
<a class="a" href="">foo</a>
<div class="b"></div>
</div>
[color=blue]
>The anchor element becomes a trigger for a style change to b, in other
>words. It doesn't seem possible. Yet both 'a' and 'b' are in scope in
>'topdiv', but outside each other's scope.[/color]

Sounds like a sibling selector.

a + b matches b that is a sibling (same direct parent) of a.

So you'd want (assuming the second html example above).
..a:hover + .b {styles}

But doesn't work. Doesn't work in IE because IE doesn't support
sibling selectors. Doesn't work in Mozilla and Opera because, um, not
sure, when I think about the difference between the sibling selector
and the child selector div:hover .b {styles} which does work (after a
fashion - the hover state for the div is lost as soon as the mouse
moves over any of the child elements) I start muttering rubbish about
inheritence but can't produce a coherent explantion.

Anyway, yes it looks like it's impossible with pure CSS 2. Time for
the JavaScript.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Chris Beall]

Re: Doesn't seem possible

Steve Pugh wrote:
[color=blue]
>
>
> Sounds like a sibling selector.
>
> a + b matches b that is a sibling (same direct parent) of a.
>[/color]

But "+" signifies 'ADJACENT sibling', so even that isn't a general
solution. The two elements would have to be adjacent and the one to be
modified would have to come second.

The following DOES work (on Netscape 7.1), but uses nested elements and
is therefore considerably more restrictive:

<style type="text/css">
..topdiv .a:hover .b {background-color: red;}
</style>
:
:
<div class="topdiv">
<a class="a" href="#dummy">T his is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>

Chris Beall

[Steve Pugh]

Re: Doesn't seem possible

Chris Beall <Chris_Beall@pr odigy.net> wrote:[color=blue]
>Steve Pugh wrote:[color=green]
>>
>> Sounds like a sibling selector.
>>
>> a + b matches b that is a sibling (same direct parent) of a.
>>[/color]
>But "+" signifies 'ADJACENT sibling',[/color]

Whoops. Some days you just wish you hadn't bothered waking up. And
Usenet rarely does anything to change that opinion.

Steve

--
"Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former." - Albert Einstein

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Steve Pugh]

Re: Doesn't seem possible

Chris Beall <Chris_Beall@pr odigy.net> wrote:[color=blue]
>Steve Pugh wrote:[color=green]
>>
>> Sounds like a sibling selector.
>>
>> a + b matches b that is a sibling (same direct parent) of a.
>>[/color]
>But "+" signifies 'ADJACENT sibling',[/color]

Whoops. Some days you just wish you hadn't bothered waking up. And
Usenet rarely does anything to change that opinion.

Steve

--
"Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former." - Albert Einstein

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Mark Johnson]

Re: Doesn't seem possible

Chris Beall <Chris_Beall@pr odigy.net> wrote:
[color=blue]
>But "+" signifies 'ADJACENT sibling', so even that isn't a general
>solution. The two elements would have to be adjacent and the one to be
>modified would have to come second.
>
>The following DOES work (on Netscape 7.1), but uses nested elements and
>is therefore considerably more restrictive:[/color]
[color=blue]
><style type="text/css">
>.topdiv .a:hover .b {background-color: red;}
></style>[/color]
[color=blue]
><div class="topdiv">
><a class="a" href="#dummy">T his is where to put the mouse.
><span class="b">An element containing whatever</span></a>
></div>[/color]

It would be. I had an example of two div siblings, out of each other's
scope. It would be a useful thing for a future css.

As it is, I turned to javascript:

<div class="topdiv">
<div class="a"><a onmouseover . . onmouseout>jkl@ #$x5</a></div>
<div id="x1" class="b"></div>
</div>

onmouseover="do cument.getEleme ntById('x1').cl assName='new_cl ass'"
onmouseout="doc ument.getElemen tById('x1').cla ssName='b'"


It means, though, for each link, you need a unique ID= . On the other
hand, since I soon plan to generate the script as XML and transform
with XSLT, that's not such a problem. Might even be able to generate
sequential IDs in XSLT, directly.

Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link. There's no
way, again, to link the event for the anchor with the stuff in the
class 'b' div. If there were, you could also display a visited color,
and the plain text would appear to behave just like a link, because
the appearance would be maintained by the anchor, itself.

[Mark Johnson]

Re: Doesn't seem possible

Chris Beall <Chris_Beall@pr odigy.net> wrote:
[color=blue]
>But "+" signifies 'ADJACENT sibling', so even that isn't a general
>solution. The two elements would have to be adjacent and the one to be
>modified would have to come second.
>
>The following DOES work (on Netscape 7.1), but uses nested elements and
>is therefore considerably more restrictive:[/color]
[color=blue]
><style type="text/css">
>.topdiv .a:hover .b {background-color: red;}
></style>[/color]
[color=blue]
><div class="topdiv">
><a class="a" href="#dummy">T his is where to put the mouse.
><span class="b">An element containing whatever</span></a>
></div>[/color]

It would be. I had an example of two div siblings, out of each other's
scope. It would be a useful thing for a future css.

As it is, I turned to javascript:

<div class="topdiv">
<div class="a"><a onmouseover . . onmouseout>jkl@ #$x5</a></div>
<div id="x1" class="b"></div>
</div>

onmouseover="do cument.getEleme ntById('x1').cl assName='new_cl ass'"
onmouseout="doc ument.getElemen tById('x1').cla ssName='b'"


It means, though, for each link, you need a unique ID= . On the other
hand, since I soon plan to generate the script as XML and transform
with XSLT, that's not such a problem. Might even be able to generate
sequential IDs in XSLT, directly.

Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link. There's no
way, again, to link the event for the anchor with the stuff in the
class 'b' div. If there were, you could also display a visited color,
and the plain text would appear to behave just like a link, because
the appearance would be maintained by the anchor, itself.

[Mark Johnson]

Re: Doesn't seem possible

Chris Beall <Chris_Beall@pr odigy.net> wrote:
[color=blue]
>But "+" signifies 'ADJACENT sibling', so even that isn't a general
>solution. The two elements would have to be adjacent and the one to be
>modified would have to come second.
>
>The following DOES work (on Netscape 7.1), but uses nested elements and
>is therefore considerably more restrictive:[/color]
[color=blue]
><style type="text/css">
>.topdiv .a:hover .b {background-color: red;}
></style>[/color]
[color=blue]
><div class="topdiv">
><a class="a" href="#dummy">T his is where to put the mouse.
><span class="b">An element containing whatever</span></a>
></div>[/color]

It would be. I had an example of two div siblings, out of each other's
scope. It would be a useful thing for a future css.

As it is, I turned to javascript:

<div class="topdiv">
<div class="a"><a onmouseover . . onmouseout>jkl@ #$x5</a></div>
<div id="x1" class="b"></div>
</div>

onmouseover="do cument.getEleme ntById('x1').cl assName='new_cl ass'"
onmouseout="doc ument.getElemen tById('x1').cla ssName='b'"


It means, though, for each link, you need a unique ID= . On the other
hand, since I soon plan to generate the script as XML and transform
with XSLT, that's not such a problem. Might even be able to generate
sequential IDs in XSLT, directly.

Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link. There's no
way, again, to link the event for the anchor with the stuff in the
class 'b' div. If there were, you could also display a visited color,
and the plain text would appear to behave just like a link, because
the appearance would be maintained by the anchor, itself.

[Mark Johnson]

Re: Doesn't seem possible

Chris Beall <Chris_Beall@pr odigy.net> wrote:
[color=blue]
>But "+" signifies 'ADJACENT sibling', so even that isn't a general
>solution. The two elements would have to be adjacent and the one to be
>modified would have to come second.
>
>The following DOES work (on Netscape 7.1), but uses nested elements and
>is therefore considerably more restrictive:[/color]
[color=blue]
><style type="text/css">
>.topdiv .a:hover .b {background-color: red;}
></style>[/color]
[color=blue]
><div class="topdiv">
><a class="a" href="#dummy">T his is where to put the mouse.
><span class="b">An element containing whatever</span></a>
></div>[/color]

It would be. I had an example of two div siblings, out of each other's
scope. It would be a useful thing for a future css.

As it is, I turned to javascript:

<div class="topdiv">
<div class="a"><a onmouseover . . onmouseout>jkl@ #$x5</a></div>
<div id="x1" class="b"></div>
</div>

onmouseover="do cument.getEleme ntById('x1').cl assName='new_cl ass'"
onmouseout="doc ument.getElemen tById('x1').cla ssName='b'"


It means, though, for each link, you need a unique ID= . On the other
hand, since I soon plan to generate the script as XML and transform
with XSLT, that's not such a problem. Might even be able to generate
sequential IDs in XSLT, directly.

Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link. There's no
way, again, to link the event for the anchor with the stuff in the
class 'b' div. If there were, you could also display a visited color,
and the plain text would appear to behave just like a link, because
the appearance would be maintained by the anchor, itself.

[Mark Johnson]

Re: Doesn't seem possible

Chris Beall <Chris_Beall@pr odigy.net> wrote:
[color=blue]
>But "+" signifies 'ADJACENT sibling', so even that isn't a general
>solution. The two elements would have to be adjacent and the one to be
>modified would have to come second.
>
>The following DOES work (on Netscape 7.1), but uses nested elements and
>is therefore considerably more restrictive:[/color]
[color=blue]
><style type="text/css">
>.topdiv .a:hover .b {background-color: red;}
></style>[/color]
[color=blue]
><div class="topdiv">
><a class="a" href="#dummy">T his is where to put the mouse.
><span class="b">An element containing whatever</span></a>
></div>[/color]

It would be. I had an example of two div siblings, out of each other's
scope. It would be a useful thing for a future css.

As it is, I turned to javascript:

<div class="topdiv">
<div class="a"><a onmouseover . . onmouseout>jkl@ #$x5</a></div>
<div id="x1" class="b"></div>
</div>

onmouseover="do cument.getEleme ntById('x1').cl assName='new_cl ass'"
onmouseout="doc ument.getElemen tById('x1').cla ssName='b'"


It means, though, for each link, you need a unique ID= . On the other
hand, since I soon plan to generate the script as XML and transform
with XSLT, that's not such a problem. Might even be able to generate
sequential IDs in XSLT, directly.

Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link. There's no
way, again, to link the event for the anchor with the stuff in the
class 'b' div. If there were, you could also display a visited color,
and the plain text would appear to behave just like a link, because
the appearance would be maintained by the anchor, itself.

[Mark Johnson]

Re: Doesn't seem possible

Chris Beall <Chris_Beall@pr odigy.net> wrote:
[color=blue]
>But "+" signifies 'ADJACENT sibling', so even that isn't a general
>solution. The two elements would have to be adjacent and the one to be
>modified would have to come second.
>
>The following DOES work (on Netscape 7.1), but uses nested elements and
>is therefore considerably more restrictive:[/color]
[color=blue]
><style type="text/css">
>.topdiv .a:hover .b {background-color: red;}
></style>[/color]
[color=blue]
><div class="topdiv">
><a class="a" href="#dummy">T his is where to put the mouse.
><span class="b">An element containing whatever</span></a>
></div>[/color]

It would be. I had an example of two div siblings, out of each other's
scope. It would be a useful thing for a future css.

As it is, I turned to javascript:

<div class="topdiv">
<div class="a"><a onmouseover . . onmouseout>jkl@ #$x5</a></div>
<div id="x1" class="b"></div>
</div>

onmouseover="do cument.getEleme ntById('x1').cl assName='new_cl ass'"
onmouseout="doc ument.getElemen tById('x1').cla ssName='b'"


It means, though, for each link, you need a unique ID= . On the other
hand, since I soon plan to generate the script as XML and transform
with XSLT, that's not such a problem. Might even be able to generate
sequential IDs in XSLT, directly.

Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link. There's no
way, again, to link the event for the anchor with the stuff in the
class 'b' div. If there were, you could also display a visited color,
and the plain text would appear to behave just like a link, because
the appearance would be maintained by the anchor, itself.

[Steve Pugh]

Re: Doesn't seem possible

Mark Johnson <102334.12@comp userve.com> wrote:
[color=blue]
>As it is, I turned to javascript:
>
><div class="topdiv">
><div class="a"><a onmouseover . . onmouseout>jkl@ #$x5</a></div>
><div id="x1" class="b"></div>
></div>
>
>onmouseover="d ocument.getElem entById('x1').c lassName='new_c lass'"
>onmouseout="do cument.getEleme ntById('x1').cl assName='b'"
>
>It means, though, for each link, you need a unique ID= .[/color]

Have you looked at the DOM nextSibling property? If a and b are
adjacent to each other as in your example then the nextSibling of a is
b.
[color=blue]
>Sure wish there were a better way. And another drawback, obviously, is
>that the viewer doesn't see a visited color on the link.[/color]

From the above there is no link. You might as well move the
onmouseover to the div itself. In reality will there be an href?
[color=blue]
>There's no way, again, to link the event for the anchor with the stuff in the
>class 'b' div. If there were, you could also display a visited color,[/color]

If you want the colour of a to change at the same time as the colour
of b then simply add that to the JS.

onmouseover="do cument.getEleme ntById('x1').cl assName='new_cl ass';
this.className= 'other_new_clas s'"
onmouseout="doc ument.getElemen tById('x1').cla ssName='b'"

Note that I've only added it to onmouseout, so a doesn't change back.
If you want it behave like a real visited link (it isn't a link so it
might be confusing to make it look too much like one) then you'd need
to set cookies to store the changes between pages/visits.

Or make it a link:
<div class="a"><a href="#x1" onmouseover . .
onmouseout>jkl@ #$x5</a></div>

With or without onclick="return false;" depending on whatever it is
you're really doing when you change the class of b. Of course that
will correctly display a visited colour when the link is followed, not
after a mouseover event. And IIRC some browsers mark visited links on
a per-page not per-fragment basis and so will always mark the links as
visited from the start.
[color=blue]
>and the plain text would appear to behave just like a link, because
>the appearance would be maintained by the anchor, itself.[/color]

A possible advantage of doing it all via JS is that when JS is turned
off you don't get the side effect (the "visited" colour) without the
main result (whatever that is).

Steve


--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>