By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

Doesn't seem possible

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
39 Replies


P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
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 ?
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>
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.


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
Els
Mark Johnson wrote:
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.


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:relative;
left:8em;
top:3em;
color:red;
}
..topdiv a.a:hover .b{
position:relative;
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 -

Jul 20 '05 #3

P: n/a
Steve Pugh wrote:


Sounds like a sibling selector.

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


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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>

Chris Beall

Jul 20 '05 #4

P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
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 ?
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>
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.


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #5

P: n/a
Steve Pugh wrote:


Sounds like a sibling selector.

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


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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>

Chris Beall

Jul 20 '05 #6

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
Steve Pugh wrote:

Sounds like a sibling selector.

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

But "+" signifies 'ADJACENT sibling',


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #7

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
Steve Pugh wrote:

Sounds like a sibling selector.

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

But "+" signifies 'ADJACENT sibling',


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #8

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>


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="document.getElementById('x1').classNa me='new_class'"
onmouseout="document.getElementById('x1').classNam e='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.
Jul 20 '05 #9

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>


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="document.getElementById('x1').classNa me='new_class'"
onmouseout="document.getElementById('x1').classNam e='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.
Jul 20 '05 #10

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>


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="document.getElementById('x1').classNa me='new_class'"
onmouseout="document.getElementById('x1').classNam e='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.
Jul 20 '05 #11

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>


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="document.getElementById('x1').classNa me='new_class'"
onmouseout="document.getElementById('x1').classNam e='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.
Jul 20 '05 #12

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>


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="document.getElementById('x1').classNa me='new_class'"
onmouseout="document.getElementById('x1').classNam e='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.
Jul 20 '05 #13

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>


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="document.getElementById('x1').classNa me='new_class'"
onmouseout="document.getElementById('x1').classNam e='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.
Jul 20 '05 #14

P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
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="document.getElementById('x1').classN ame='new_class'"
onmouseout="document.getElementById('x1').classNa me='b'"

It means, though, for each link, you need a unique ID= .
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.
Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link.
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?
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,
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="document.getElementById('x1').classNa me='new_class';
this.className='other_new_class'"
onmouseout="document.getElementById('x1').classNam e='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.
and the plain text would appear to behave just like a link, because
the appearance would be maintained by the anchor, itself.


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #15

P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
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="document.getElementById('x1').classN ame='new_class'"
onmouseout="document.getElementById('x1').classNa me='b'"

It means, though, for each link, you need a unique ID= .
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.
Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link.
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?
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,
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="document.getElementById('x1').classNa me='new_class';
this.className='other_new_class'"
onmouseout="document.getElementById('x1').classNam e='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.
and the plain text would appear to behave just like a link, because
the appearance would be maintained by the anchor, itself.


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #16

P: n/a
Steve Pugh <st***@pugh.net> wrote:
Mark Johnson <10*******@compuserve.com> wrote:
<div class="topdiv">
<div class="a"><a onmouseover . . onmouseout>jkl@#$x5</a></div>
<div id="x1" class="b"></div>
</div>

onmouseover="document.getElementById('x1').class Name='new_class'"
onmouseout="document.getElementById('x1').classN ame='b'"

It means, though, for each link, you need a unique ID= .


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.


Of course that would mean you'd need to place the mouseover event on a
(the div) rather than on the link element (or change the code to move
up to the parent and then along to the sibling), but as I discussed
elsewhere the link element seems to be redundent anyway.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #17

P: n/a
Steve Pugh <st***@pugh.net> wrote:
Mark Johnson <10*******@compuserve.com> wrote:
<div class="topdiv">
<div class="a"><a onmouseover . . onmouseout>jkl@#$x5</a></div>
<div id="x1" class="b"></div>
</div>

onmouseover="document.getElementById('x1').class Name='new_class'"
onmouseout="document.getElementById('x1').classN ame='b'"

It means, though, for each link, you need a unique ID= .


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.


Of course that would mean you'd need to place the mouseover event on a
(the div) rather than on the link element (or change the code to move
up to the parent and then along to the sibling), but as I discussed
elsewhere the link element seems to be redundent anyway.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #18

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>


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="document.getElementById('x1').classNa me='new_class'"
onmouseout="document.getElementById('x1').classNam e='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. And I can't
see a way to fix that outside of javascript. And I think there are
limits to workarounds before it gets silly. 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.

I wonder if it wouldn't be a good addition to css to allow
modification of other styles inside of a particular style. Then you'd
have complete flexibility.

So:

..classA A:hover {
.classB { }
}

Or #top_sect.classB, or whatever you like. It would seem it might
require an 'all' selector, if there isn't such an equivalent now, to
remove the ambiguity of whether the above refers to all classB or
just those contained in classAs.

And this also introduces a programming aspect to css, because here the
pseudo-selector is behaving as a conditional. ClassB is what it is,
until the viewer places the cursor over a ClassA block. Then ClassB is
changed just during that time, and otherwise reverts. But it would
seem useful, considering how the hover pseudo-selector is so
frequently used, as web document still are based on the old hypertext
model of moving over and clicking on links.

I also found a good use for the direct x filters for IE. Things like
glow, and drop shadow, are really slick. But they can complete throw
off presenatation and layout. Things no longer line up. But gradient I
hadn't really tried, before. It's no loss if it isn't rendered on a
busted IE, or another browser. But on those IE where it does show, it
can produce very nice looking effects. Think of the NN/WinXP 'blue
design', with the light blues and whites, and imagine a gradient
type=0, vertical, with a slightly whiter top fading to a very slightly
different gray on the bottom. It's looks very nice.
Jul 20 '05 #19

P: n/a
Chris Beall <Ch*********@prodigy.net> wrote:
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">This is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>


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="document.getElementById('x1').classNa me='new_class'"
onmouseout="document.getElementById('x1').classNam e='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. And I can't
see a way to fix that outside of javascript. And I think there are
limits to workarounds before it gets silly. 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.

I wonder if it wouldn't be a good addition to css to allow
modification of other styles inside of a particular style. Then you'd
have complete flexibility.

So:

..classA A:hover {
.classB { }
}

Or #top_sect.classB, or whatever you like. It would seem it might
require an 'all' selector, if there isn't such an equivalent now, to
remove the ambiguity of whether the above refers to all classB or
just those contained in classAs.

And this also introduces a programming aspect to css, because here the
pseudo-selector is behaving as a conditional. ClassB is what it is,
until the viewer places the cursor over a ClassA block. Then ClassB is
changed just during that time, and otherwise reverts. But it would
seem useful, considering how the hover pseudo-selector is so
frequently used, as web document still are based on the old hypertext
model of moving over and clicking on links.

I also found a good use for the direct x filters for IE. Things like
glow, and drop shadow, are really slick. But they can complete throw
off presenatation and layout. Things no longer line up. But gradient I
hadn't really tried, before. It's no loss if it isn't rendered on a
busted IE, or another browser. But on those IE where it does show, it
can produce very nice looking effects. Think of the NN/WinXP 'blue
design', with the light blues and whites, and imagine a gradient
type=0, vertical, with a slightly whiter top fading to a very slightly
different gray on the bottom. It's looks very nice.
Jul 20 '05 #20

P: n/a
Steve Pugh <st***@pugh.net> wrote:

I didn't realize this was getting through. I posted a few times
because my newsreader said it wasn't being posted.

Mark Johnson <10*******@compuserve.com> wrote:
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="document.getElementById('x1').class Name='new_class'"
onmouseout="document.getElementById('x1').classN ame='b'" It means, though, for each link, you need a unique ID= . Have you looked at the DOM nextSibling property? If a and b are
adjacent
That's so restrictive as to seem almost an exceptional case.

Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link. From the above there is no link.
The link is extended out to cover the text. It's much like that Flash
'transparent button', that was so often used. So you just extend the
width of the button, but you turn off the image display. So the link
is like that Flash button, it covers whatever you want. And it
literally does cover it. If you use a background color, it will
occlude the text. It's that button that is being used for the
input/browser events. It's an invisible button, covering the text. But
I'd like the text to behave as if it were the button. So it should
highlight, and have a visited appearance, as well.

Now I can get the highlight, and whatever else, with the javascript,
as shown above. But a) there's no way to mock a visited state. And b)
you need those unique ids for each 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,

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="document.getElementById('x1').classN ame='new_class';
this.className='other_new_class'"
onmouseout="document.getElementById('x1').classNa me='b'"
But the anchor's visited state isn't tied to this unrelated text over
which the button is floated, as it were.

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
Sometimes just saying quack isn't enough. But . . if it looks like a
link, clicks like a link, and gets a visited state like a link - isn't
it a link?

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).


When . . it's turned off? If you turn it off, you'd just see some text
with a hand/click cursor over it.

I would think the better way is to allow for any style to be modified
inside of any selector - and particularly :hover, which is fairly
unique. Maybe just for hover - I don't know. As I wrote in the amended
message, which might actually show up, the only thing you'd need is
some further selector to remove the ambiguity of whether the style,
inside, is limited to that selector, or if that change applies
globally throughout the document. And I also don't know what the
overhead would be for implementation. But it would add much
flexibility.

Jul 20 '05 #21

P: n/a
Steve Pugh <st***@pugh.net> wrote:

I didn't realize this was getting through. I posted a few times
because my newsreader said it wasn't being posted.

Mark Johnson <10*******@compuserve.com> wrote:
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="document.getElementById('x1').class Name='new_class'"
onmouseout="document.getElementById('x1').classN ame='b'" It means, though, for each link, you need a unique ID= . Have you looked at the DOM nextSibling property? If a and b are
adjacent
That's so restrictive as to seem almost an exceptional case.

Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link. From the above there is no link.
The link is extended out to cover the text. It's much like that Flash
'transparent button', that was so often used. So you just extend the
width of the button, but you turn off the image display. So the link
is like that Flash button, it covers whatever you want. And it
literally does cover it. If you use a background color, it will
occlude the text. It's that button that is being used for the
input/browser events. It's an invisible button, covering the text. But
I'd like the text to behave as if it were the button. So it should
highlight, and have a visited appearance, as well.

Now I can get the highlight, and whatever else, with the javascript,
as shown above. But a) there's no way to mock a visited state. And b)
you need those unique ids for each 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,

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="document.getElementById('x1').classN ame='new_class';
this.className='other_new_class'"
onmouseout="document.getElementById('x1').classNa me='b'"
But the anchor's visited state isn't tied to this unrelated text over
which the button is floated, as it were.

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
Sometimes just saying quack isn't enough. But . . if it looks like a
link, clicks like a link, and gets a visited state like a link - isn't
it a link?

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).


When . . it's turned off? If you turn it off, you'd just see some text
with a hand/click cursor over it.

I would think the better way is to allow for any style to be modified
inside of any selector - and particularly :hover, which is fairly
unique. Maybe just for hover - I don't know. As I wrote in the amended
message, which might actually show up, the only thing you'd need is
some further selector to remove the ambiguity of whether the style,
inside, is limited to that selector, or if that change applies
globally throughout the document. And I also don't know what the
overhead would be for implementation. But it would add much
flexibility.

Jul 20 '05 #22

P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
Steve Pugh <st***@pugh.net> wrote:
Mark Johnson <10*******@compuserve.com> wrote:

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="document.getElementById('x1').clas sName='new_class'"
onmouseout="document.getElementById('x1').class Name='b'"It means, though, for each link, you need a unique ID= .
Have you looked at the DOM nextSibling property? If a and b are
adjacent


That's so restrictive as to seem almost an exceptional case.


There are lots of different DOM properties. nextSibling is one that
matches the code you posted. If the code you posted is not an accurate
reflection of your real code then you only have yourself to blame if
the answers your receive don't work when applied to your real code.

Personally I found nextSibling very useful when I was creating a
function wherein a click on a <th> affected one or more <td>s in the
same row. I've got a table with many, many rows and clicking on the
row headers triggers events in that row without the need for a single
id attribute. Very clean code.
Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link.
From the above there is no link.


The link is extended out to cover the text.


Your code is <a onmouseover . . onmouseout>jkl@#$x5</a> which is not a
link. Are to guess that there's an href in the real thing as well? So
where is the link? Is it the <a> element? Or is there another <a>
element somewhere else? Or are you creating a fake link via some
JavaScript and an onClick event handler?
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,
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="document.getElementById('x1').class Name='new_class';
this.className='other_new_class'"
onmouseout="document.getElementById('x1').classN ame='b'"


But the anchor's visited state isn't tied to this unrelated text over
which the button is floated, as it were.


Huh? An anchor's visited state is tied to whether the linked resource
has been visited or not. But you don't have a linked resource so I
guessed that you wanted a "visited" state to apply after the mouseover
event had been triggered - that being the only thing that happens in
your code.
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


Sometimes just saying quack isn't enough. But . . if it looks like a
link, clicks like a link, and gets a visited state like a link - isn't
it a link?


I don't know.
<a href="foo">bar</a> is a link.
But your code doesn't contain that. All your code contains is some
JavaScript that changes the style of another element when the mouse is
over an <a> element. That doesn't sound like a link to me.
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).


When . . it's turned off? If you turn it off, you'd just see some text
with a hand/click cursor over it.


And when the user follows the prompt of that cursor and clicks? What
happens then?

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #23

P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
Steve Pugh <st***@pugh.net> wrote:
Mark Johnson <10*******@compuserve.com> wrote:

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="document.getElementById('x1').clas sName='new_class'"
onmouseout="document.getElementById('x1').class Name='b'"It means, though, for each link, you need a unique ID= .
Have you looked at the DOM nextSibling property? If a and b are
adjacent


That's so restrictive as to seem almost an exceptional case.


There are lots of different DOM properties. nextSibling is one that
matches the code you posted. If the code you posted is not an accurate
reflection of your real code then you only have yourself to blame if
the answers your receive don't work when applied to your real code.

Personally I found nextSibling very useful when I was creating a
function wherein a click on a <th> affected one or more <td>s in the
same row. I've got a table with many, many rows and clicking on the
row headers triggers events in that row without the need for a single
id attribute. Very clean code.
Sure wish there were a better way. And another drawback, obviously, is
that the viewer doesn't see a visited color on the link.
From the above there is no link.


The link is extended out to cover the text.


Your code is <a onmouseover . . onmouseout>jkl@#$x5</a> which is not a
link. Are to guess that there's an href in the real thing as well? So
where is the link? Is it the <a> element? Or is there another <a>
element somewhere else? Or are you creating a fake link via some
JavaScript and an onClick event handler?
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,
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="document.getElementById('x1').class Name='new_class';
this.className='other_new_class'"
onmouseout="document.getElementById('x1').classN ame='b'"


But the anchor's visited state isn't tied to this unrelated text over
which the button is floated, as it were.


Huh? An anchor's visited state is tied to whether the linked resource
has been visited or not. But you don't have a linked resource so I
guessed that you wanted a "visited" state to apply after the mouseover
event had been triggered - that being the only thing that happens in
your code.
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


Sometimes just saying quack isn't enough. But . . if it looks like a
link, clicks like a link, and gets a visited state like a link - isn't
it a link?


I don't know.
<a href="foo">bar</a> is a link.
But your code doesn't contain that. All your code contains is some
JavaScript that changes the style of another element when the mouse is
over an <a> element. That doesn't sound like a link to me.
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).


When . . it's turned off? If you turn it off, you'd just see some text
with a hand/click cursor over it.


And when the user follows the prompt of that cursor and clicks? What
happens then?

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #24

P: n/a

"Chris Beall" <Ch*********@prodigy.net> wrote in message
news:Ek***************@newssvr32.news.prodigy.com. ..
Steve Pugh wrote:


Sounds like a sibling selector.

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


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.

Does A + * + B work?

Jul 20 '05 #25

P: n/a

"Chris Beall" <Ch*********@prodigy.net> wrote in message
news:Ek***************@newssvr32.news.prodigy.com. ..
Steve Pugh wrote:


Sounds like a sibling selector.

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


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.

Does A + * + B work?

Jul 20 '05 #26

P: n/a
Steve Pugh <st***@pugh.net> wrote:

But the anchor's visited state isn't tied to this unrelated text over
which the button is floated, as it were.
Huh? An anchor's visited state is tied to whether
"to this unrelated text" . . "over which . . " etc.

Are you familiar with Flash? This is a technique often used to place a
transparent button over an area to pick up event triggers.

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
Sometimes just saying quack isn't enough. But . . if it looks like a
link, clicks like a link, and gets a visited state like a link - isn't
it a link? I don't know.
<a href="foo">bar</a> is a link.
But your code doesn't contain that. All your code contains is some
JavaScript
And it's just as I described. With the use of subtle Direct X
gradients, avail only in IE, it's a very nice looking display when the
cursor is moved over the link. But the text which is transformed is
just plain text, in another division entirely.

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).

When . . it's turned off? If you turn it off, you'd just see some text
with a hand/click cursor over it.

And when the user follows the prompt of that cursor and clicks? What
happens then?


Think of it as a transparent button floating over another DIV. You can
change the size of these blocks, widen them, move them around. And
that's what I did, using a style, in one of a many selectable
sytlesheets for a single page (and the stylesheet selection is saved
in a persistent, top-menu cookie). Other stylesheets won't do this,
and will present a very, very different look. A lot of this is taking
the cue from the Zen Garden displays, and others, where the use of
styles is used to present what seem, at first glance, to be entirely
different pages. While some tables were unavoidable for a non-style or
old browser compatibility, I tried to avoid their use where possible,
unlike many of the so-called 'professionally designed' corporate
sites.
I think the solution was already suggested. It doesn't exist, yet.
What could be used is a style within a style, or maybe that such could
only be included in the :hover selector, which is unique. Visited, for
example, is not responding to input events. Hover is.

It might read like this (and doesn't now, you can't do this in CSS at
present):

..classA A:hover {
color: #9090ff;
padding: 0px;
.classB {
color: #0000ff
}
}

or:

..classA A:hover {
color: #9090ff;
padding: 0px;
#Bdiv.classB {
color: #0000ff
}
}

or:

..classA A:hover {
color: #9090ff;
padding: 0px;
#topdiv2 HR {
color: #0000ff
}
}

etc. Generally something not contained in classA - but anywhere else
in the document.

Only during the hover over any classA, is the color for classB
overriden, 'cascade style'. As I wrote, to remove the amibiguity as to
whether this refers to nested classBs, those contained in classAs, or
to those everywhere, perhaps something else is needed. The default
could be global. Some new selector might be added to restrict only to
scope - in this case, classBs only contained inside classA elements.

Jul 20 '05 #27

P: n/a
Steve Pugh <st***@pugh.net> wrote:

But the anchor's visited state isn't tied to this unrelated text over
which the button is floated, as it were.
Huh? An anchor's visited state is tied to whether
"to this unrelated text" . . "over which . . " etc.

Are you familiar with Flash? This is a technique often used to place a
transparent button over an area to pick up event triggers.

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
Sometimes just saying quack isn't enough. But . . if it looks like a
link, clicks like a link, and gets a visited state like a link - isn't
it a link? I don't know.
<a href="foo">bar</a> is a link.
But your code doesn't contain that. All your code contains is some
JavaScript
And it's just as I described. With the use of subtle Direct X
gradients, avail only in IE, it's a very nice looking display when the
cursor is moved over the link. But the text which is transformed is
just plain text, in another division entirely.

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).

When . . it's turned off? If you turn it off, you'd just see some text
with a hand/click cursor over it.

And when the user follows the prompt of that cursor and clicks? What
happens then?


Think of it as a transparent button floating over another DIV. You can
change the size of these blocks, widen them, move them around. And
that's what I did, using a style, in one of a many selectable
sytlesheets for a single page (and the stylesheet selection is saved
in a persistent, top-menu cookie). Other stylesheets won't do this,
and will present a very, very different look. A lot of this is taking
the cue from the Zen Garden displays, and others, where the use of
styles is used to present what seem, at first glance, to be entirely
different pages. While some tables were unavoidable for a non-style or
old browser compatibility, I tried to avoid their use where possible,
unlike many of the so-called 'professionally designed' corporate
sites.
I think the solution was already suggested. It doesn't exist, yet.
What could be used is a style within a style, or maybe that such could
only be included in the :hover selector, which is unique. Visited, for
example, is not responding to input events. Hover is.

It might read like this (and doesn't now, you can't do this in CSS at
present):

..classA A:hover {
color: #9090ff;
padding: 0px;
.classB {
color: #0000ff
}
}

or:

..classA A:hover {
color: #9090ff;
padding: 0px;
#Bdiv.classB {
color: #0000ff
}
}

or:

..classA A:hover {
color: #9090ff;
padding: 0px;
#topdiv2 HR {
color: #0000ff
}
}

etc. Generally something not contained in classA - but anywhere else
in the document.

Only during the hover over any classA, is the color for classB
overriden, 'cascade style'. As I wrote, to remove the amibiguity as to
whether this refers to nested classBs, those contained in classAs, or
to those everywhere, perhaps something else is needed. The default
could be global. Some new selector might be added to restrict only to
scope - in this case, classBs only contained inside classA elements.

Jul 20 '05 #28

P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
Steve Pugh <st***@pugh.net> wrote:
But the anchor's visited state isn't tied to this unrelated text over
which the button is floated, as it were.
Huh? An anchor's visited state is tied to whether
"to this unrelated text" . . "over which . . " etc.


Are you agreeing or disagreeing with me?
Are you familiar with Flash?
No. Well, yes, I know what it is and I have it enabled in browser
about 25% of the time, and I know four or five different ways of
embedding it into HTML but I don't do Flash development myself - lots
of flash monkeys out there.
<a href="foo">bar</a> is a link.
But your code doesn't contain that. All your code contains is some
JavaScript


And it's just as I described.


Post a URL. Your descriptions are verbose, vague and jump from one
topic to another at random. It would be much easier if we could see
what you were talking about.
With the use of subtle Direct X
gradients, avail only in IE, it's a very nice looking display when the
cursor is moved over the link.
What link? There is NO LINK in your code. So why do you keep on
talking about a link?
But the text which is transformed is
just plain text, in another division entirely.


Fine. So when you mouseover one element you change teh style of
another, that is about the only clear thing in this entire thread.
Still doesn't explain where this mythical link comes from or why you
want it to have a 'visited' state.
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).When . . it's turned off? If you turn it off, you'd just see some text
with a hand/click cursor over it.

And when the user follows the prompt of that cursor and clicks? What
happens then?


Think of it as a transparent button floating over another DIV. You can
change the size of these blocks, widen them, move them around. And
that's what I did, using a style, in one of a many selectable
sytlesheets for a single page (and the stylesheet selection is saved
in a persistent, top-menu cookie). Other stylesheets won't do this,
and will present a very, very different look. A lot of this is taking
the cue from the Zen Garden displays, and others, where the use of
styles is used to present what seem, at first glance, to be entirely
different pages. While some tables were unavoidable for a non-style or
old browser compatibility, I tried to avoid their use where possible,
unlike many of the so-called 'professionally designed' corporate
sites.


12 lines and you didn't answer my question. I understand that English
probably isn't your first language but was my question really that
hard to understand?

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #29

P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
Steve Pugh <st***@pugh.net> wrote:
But the anchor's visited state isn't tied to this unrelated text over
which the button is floated, as it were.
Huh? An anchor's visited state is tied to whether
"to this unrelated text" . . "over which . . " etc.


Are you agreeing or disagreeing with me?
Are you familiar with Flash?
No. Well, yes, I know what it is and I have it enabled in browser
about 25% of the time, and I know four or five different ways of
embedding it into HTML but I don't do Flash development myself - lots
of flash monkeys out there.
<a href="foo">bar</a> is a link.
But your code doesn't contain that. All your code contains is some
JavaScript


And it's just as I described.


Post a URL. Your descriptions are verbose, vague and jump from one
topic to another at random. It would be much easier if we could see
what you were talking about.
With the use of subtle Direct X
gradients, avail only in IE, it's a very nice looking display when the
cursor is moved over the link.
What link? There is NO LINK in your code. So why do you keep on
talking about a link?
But the text which is transformed is
just plain text, in another division entirely.


Fine. So when you mouseover one element you change teh style of
another, that is about the only clear thing in this entire thread.
Still doesn't explain where this mythical link comes from or why you
want it to have a 'visited' state.
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).When . . it's turned off? If you turn it off, you'd just see some text
with a hand/click cursor over it.

And when the user follows the prompt of that cursor and clicks? What
happens then?


Think of it as a transparent button floating over another DIV. You can
change the size of these blocks, widen them, move them around. And
that's what I did, using a style, in one of a many selectable
sytlesheets for a single page (and the stylesheet selection is saved
in a persistent, top-menu cookie). Other stylesheets won't do this,
and will present a very, very different look. A lot of this is taking
the cue from the Zen Garden displays, and others, where the use of
styles is used to present what seem, at first glance, to be entirely
different pages. While some tables were unavoidable for a non-style or
old browser compatibility, I tried to avoid their use where possible,
unlike many of the so-called 'professionally designed' corporate
sites.


12 lines and you didn't answer my question. I understand that English
probably isn't your first language but was my question really that
hard to understand?

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #30

P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
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 an element (containing
whatever), associated with class, 'b'.

Can you read the pseudo selector :hover for 'a', and somehow modify
presentation for 'b'?
No you select (and style) the whole DIV, then revert the parts you
don't want altered. Can't work for MSIE, of course, since it only
implements :HOVER on A.

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.


Seems simple enough to me.

<div>
<a> Hover here to </a>
<b> See me change. </b>
</div>

div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.

--
Karl Smith.
Jul 20 '05 #31

P: n/a
Mark Johnson <10*******@compuserve.com> wrote:
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 an element (containing
whatever), associated with class, 'b'.

Can you read the pseudo selector :hover for 'a', and somehow modify
presentation for 'b'?
No you select (and style) the whole DIV, then revert the parts you
don't want altered. Can't work for MSIE, of course, since it only
implements :HOVER on A.

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.


Seems simple enough to me.

<div>
<a> Hover here to </a>
<b> See me change. </b>
</div>

div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.

--
Karl Smith.
Jul 20 '05 #32

P: n/a
In article Karl Smith wrote:
Mark Johnson <10*******@compuserve.com> wrote:
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 an element (containing
whatever), associated with class, 'b'.

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


No you select (and style) the whole DIV, then revert the parts you
don't want altered. Can't work for MSIE, of course, since it only
implements :HOVER on A.

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.


Seems simple enough to me.

<div>
<a> Hover here to </a>
<b> See me change. </b>
</div>

div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.


That worked best in Opera 7.21beta 6 or 10 or something (if someone wants
to know, google opera.beta for my bug charts, that version had bug that
this didn't work for display:table etc.). Has not worked on any release
version of Opera IIRC. I haven't tested since O7.5b2 and not on mozilla
since firbird.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #33

P: n/a
In article Karl Smith wrote:
Mark Johnson <10*******@compuserve.com> wrote:
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 an element (containing
whatever), associated with class, 'b'.

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


No you select (and style) the whole DIV, then revert the parts you
don't want altered. Can't work for MSIE, of course, since it only
implements :HOVER on A.

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.


Seems simple enough to me.

<div>
<a> Hover here to </a>
<b> See me change. </b>
</div>

div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.


That worked best in Opera 7.21beta 6 or 10 or something (if someone wants
to know, google opera.beta for my bug charts, that version had bug that
this didn't work for display:table etc.). Has not worked on any release
version of Opera IIRC. I haven't tested since O7.5b2 and not on mozilla
since firbird.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #34

P: n/a
go************@kjsmith.com (Karl Smith) wrote:
Mark Johnson <10*******@compuserve.com> wrote:

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.


Seems simple enough to me.

<div>
<a> Hover here to </a>
<b> See me change. </b>
</div>

div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.


Unfortunately, most (90% or more?) people use IE for browsing.
Arguably NN, at this point, in version 7, is again the superior
browser. But they had their shot and blew it in the release of version
6.

I think the only way to get the hover in IE is with the javascript I
mentioned - which works just fine.

But there's a problem. The visited state.

I suggested an improvement to the next css. It would allow
modification, in cascade style, of element styles or predefined styles
if placed inside the braces of yet another, for ex:

..style1{
color: #000000
}

style2{
color: #333333
}

..style1 A:hover {
.style2{ color: #445433 }
}

So the text for style2 changes to 445433 when the viewer places the
cursor over an anchor using style1, and reverts to 333333 when the
cursor is moved off and away.

And:

..style1 A:visited{
.style2{ color: #555555 }
}

If the link has been visited, then style2 color is permanently changed
to 555555, from 333333, or until the link history is cleared.

It's the second part I can't seem to mimic in IE, and would seem to
require such an addition to the css model.
Jul 20 '05 #35

P: n/a
go************@kjsmith.com (Karl Smith) wrote:
Mark Johnson <10*******@compuserve.com> wrote:

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.


Seems simple enough to me.

<div>
<a> Hover here to </a>
<b> See me change. </b>
</div>

div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.


Unfortunately, most (90% or more?) people use IE for browsing.
Arguably NN, at this point, in version 7, is again the superior
browser. But they had their shot and blew it in the release of version
6.

I think the only way to get the hover in IE is with the javascript I
mentioned - which works just fine.

But there's a problem. The visited state.

I suggested an improvement to the next css. It would allow
modification, in cascade style, of element styles or predefined styles
if placed inside the braces of yet another, for ex:

..style1{
color: #000000
}

style2{
color: #333333
}

..style1 A:hover {
.style2{ color: #445433 }
}

So the text for style2 changes to 445433 when the viewer places the
cursor over an anchor using style1, and reverts to 333333 when the
cursor is moved off and away.

And:

..style1 A:visited{
.style2{ color: #555555 }
}

If the link has been visited, then style2 color is permanently changed
to 555555, from 333333, or until the link history is cleared.

It's the second part I can't seem to mimic in IE, and would seem to
require such an addition to the css model.
Jul 20 '05 #36

P: n/a
Lauri Raittila <la***@raittila.cjb.net> wrote:
div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.
That worked best in Opera 7.21beta 6 or 10 or something (if someone

wantsto know, google opera.beta for my bug charts, that version had bug thatthis didn't work for display:table etc.). Has not worked on any releaseversion of Opera IIRC. I haven't tested since O7.5b2 and not on mozillasince firbird.


The best I could get for :visited was to apply a DirectX filter in IE.
The style is brought in through a javascript loader only for IE 5.5+.
I was reluctant to use this, for IE, because sometimes the DirectX
filters can be broken. If you rely on them, it could break on you. So
instead of a background color, which if the DX alpha failed to work
would entirely cover the 'link' text, I used a transparent gif. This
gives you the necessary 'hot' area on the visited link. The linkbutton
is, in a non-styled version, a left aligned img inside an anchor
element.
..linkbuttonA A {
height: 2em;
width: 100%;
padding-top: 2px;
}

..linkbuttonA IMG {
display: none;
}

..linkbuttonA A:visited {
background: url(spacer2.gif);
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0,
startColorstr=#dfB6C6e0, endColorstr=#dfa1b4d2)
filter: progid:DXImageTransform.Microsoft.Alpha (opacity=48);
}

The normal gradient for the element which contains the text:

..linknameA {
width: 100%;
padding-left: -2%;
margin-bottom: 2px;
font-family: Trebuchet MS, Arial, sans-serif;
color: #550033;
letter-spacing: 1px;
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0,
startColorstr=#57eaeaf8, endColorstr=#dfa1b4cf)
}
It happens to be a bluish/NN scheme. So when linkbuttonA is in the
visited state, the 48 opacity allows you to see the linknameA text
underneath. And the gradient, with these settings, looks the same, for
either. It does sort of 'fade out' the text. And that's your visited
indication - that the text for the 'link' appears lighter, and washed
out. Unfortunately, that also grays and washes out, a bit, the
highlighted/hover state, as well. But maybe that's a good thing,
reminding the viewer that it is a visited link. I couldn't change the
text color this way. If you change the gradient color, from the
non-visited gradient color, I found it distracting. Short of changing
the linknameA color, directly, which doesn't seem possible in IE,
washing it out is maybe the next best thing to indicate a visited
state, in this particular design and situation?
Jul 20 '05 #37

P: n/a
Lauri Raittila <la***@raittila.cjb.net> wrote:
div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.
That worked best in Opera 7.21beta 6 or 10 or something (if someone

wantsto know, google opera.beta for my bug charts, that version had bug thatthis didn't work for display:table etc.). Has not worked on any releaseversion of Opera IIRC. I haven't tested since O7.5b2 and not on mozillasince firbird.


The best I could get for :visited was to apply a DirectX filter in IE.
The style is brought in through a javascript loader only for IE 5.5+.
I was reluctant to use this, for IE, because sometimes the DirectX
filters can be broken. If you rely on them, it could break on you. So
instead of a background color, which if the DX alpha failed to work
would entirely cover the 'link' text, I used a transparent gif. This
gives you the necessary 'hot' area on the visited link. The linkbutton
is, in a non-styled version, a left aligned img inside an anchor
element.
..linkbuttonA A {
height: 2em;
width: 100%;
padding-top: 2px;
}

..linkbuttonA IMG {
display: none;
}

..linkbuttonA A:visited {
background: url(spacer2.gif);
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0,
startColorstr=#dfB6C6e0, endColorstr=#dfa1b4d2)
filter: progid:DXImageTransform.Microsoft.Alpha (opacity=48);
}

The normal gradient for the element which contains the text:

..linknameA {
width: 100%;
padding-left: -2%;
margin-bottom: 2px;
font-family: Trebuchet MS, Arial, sans-serif;
color: #550033;
letter-spacing: 1px;
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0,
startColorstr=#57eaeaf8, endColorstr=#dfa1b4cf)
}
It happens to be a bluish/NN scheme. So when linkbuttonA is in the
visited state, the 48 opacity allows you to see the linknameA text
underneath. And the gradient, with these settings, looks the same, for
either. It does sort of 'fade out' the text. And that's your visited
indication - that the text for the 'link' appears lighter, and washed
out. Unfortunately, that also grays and washes out, a bit, the
highlighted/hover state, as well. But maybe that's a good thing,
reminding the viewer that it is a visited link. I couldn't change the
text color this way. If you change the gradient color, from the
non-visited gradient color, I found it distracting. Short of changing
the linknameA color, directly, which doesn't seem possible in IE,
washing it out is maybe the next best thing to indicate a visited
state, in this particular design and situation?
Jul 20 '05 #38

P: n/a
In article Mark Johnson wrote:
div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.
Lauri Raittila <la***@raittila.cjb.net> wrote:
That worked best in Opera 7.21beta 6 or 10 or something (if someone wants
to know, google opera.beta for my bug charts, that version had bug that
this didn't work for display:table etc.). Has not worked on any release
version of Opera IIRC. I haven't tested since O7.5b2 and not on mozilla
since firbird.


The best I could get for :visited was to apply a DirectX filter in IE.
The style is brought in through a javascript loader only for IE 5.5+.
I was reluctant to use this, for IE, because sometimes the DirectX
filters can be broken. If you rely on them, it could break on you. So
instead of a background color, which if the DX alpha failed to work
would entirely cover the 'link' text, I used a transparent gif. This
gives you the necessary 'hot' area on the visited link. The linkbutton
is, in a non-styled version, a left aligned img inside an anchor
element.


I have no idea what you want to happen
Why is
div:hover a:visited { color: blue }
not good? (exept that it don't work on IE?)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #39

P: n/a
In article Mark Johnson wrote:
div { color: blue }
div:HOVER { color: red }
div:HOVER a { color: blue }
div b:HOVER { color: blue }

Try that in Mozilla or Opera 7.5 - probably not in Opera 7.2.
Lauri Raittila <la***@raittila.cjb.net> wrote:
That worked best in Opera 7.21beta 6 or 10 or something (if someone wants
to know, google opera.beta for my bug charts, that version had bug that
this didn't work for display:table etc.). Has not worked on any release
version of Opera IIRC. I haven't tested since O7.5b2 and not on mozilla
since firbird.


The best I could get for :visited was to apply a DirectX filter in IE.
The style is brought in through a javascript loader only for IE 5.5+.
I was reluctant to use this, for IE, because sometimes the DirectX
filters can be broken. If you rely on them, it could break on you. So
instead of a background color, which if the DX alpha failed to work
would entirely cover the 'link' text, I used a transparent gif. This
gives you the necessary 'hot' area on the visited link. The linkbutton
is, in a non-styled version, a left aligned img inside an anchor
element.


I have no idea what you want to happen
Why is
div:hover a:visited { color: blue }
not good? (exept that it don't work on IE?)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #40

This discussion thread is closed

Replies have been disabled for this discussion.