473,695 Members | 2,628 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Doesn't seem possible

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
39 3323
Mark Johnson <10*******@comp userve.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
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: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 -

Jul 20 '05 #3
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">T his is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>

Chris Beall

Jul 20 '05 #4
Mark Johnson <10*******@comp userve.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
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">T his is where to put the mouse.
<span class="b">An element containing whatever</span></a>
</div>

Chris Beall

Jul 20 '05 #6
Chris Beall <Ch*********@pr odigy.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
Chris Beall <Ch*********@pr odigy.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
Chris Beall <Ch*********@pr odigy.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">T his 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="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.
Jul 20 '05 #9
Chris Beall <Ch*********@pr odigy.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">T his 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="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.
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
1854
by: Mark Johnson | last post by:
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'.
11
3515
by: Laphan | last post by:
Hi All I'm using .getRows() with a local var array instead of doing a recursive loop so that I'm being a good ASP newvbie and closing my object i/o's (the recordset in this case) as quick as possible. My problem is that I can't seem to use this to complete good effect because the IsArray statement doesn't seem to work with a local var array that has or has not been populated with the .getRows() property.
6
1878
by: benb | last post by:
I have form that looks a lot like a search bar for the user to search for records matching specified criteria (e.g. first names containing "ben"). For robust results, an intermediary form displays all records matching the criteria (hmm...sound like a popular web site I know). Here is the immediate problem: my code (below) works fine on my computer, but on some of those belonging to my work colleagues (who will be the end users of the db)...
149
25139
by: Christopher Benson-Manica | last post by:
(Followups set to comp.std.c. Apologies if the crosspost is unwelcome.) strchr() is to strrchr() as strstr() is to strrstr(), but strrstr() isn't part of the standard. Why not? -- Christopher Benson-Manica | I *should* know what I'm talking about - if I ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
3
2031
by: vladvadeanu | last post by:
I have this problem... I want to add controls to a WebForm (any kind of controls... panels, buttons, datagrids,...) at runtime and I could do that with HtmlControls :" Label myLabel = new Label(); this.Controls.Add(myLabel) " but I don't know how to add events to them such as onClick, OnKeyDown... There is a ServerClick event that doesn't seem to be working... If anyone could help me :wink:
3
2466
by: qwerty | last post by:
I´m new to ASP.Net. My workmate has some experience with it. He claimed that in ASP.Net working with frames is much simpler than it was ASP. I asked explanation but he couldn't give me such. (a button inside a-tag with attribute target isn't anything new relating ASP.Net, its same old HTML). He claimed that you could change another page´s controls´s property´s value from another frame by using this method: ' Page "Bottom"
13
1343
by: Giggle Girl | last post by:
My pages need to unfold gracefully even if Javascript is disabled, but I can't get this to work? Please help, Javascript Gurus!! <noscript> document.write('<span class=warning><b>Warning</b>: You must enable javascript for this page to work properly!</span>') </noscript>
3
6723
by: ImageAnalyst | last post by:
I'm trying to have the user browse to a folder, once they click a button, using the standard FolderBrowserDialog tool, System.Windows.Forms.FolderBrowserDialog. I'm using VB.Net 2005. There is a property, SelectedPath, that you're supposed to be able to set that will initialize the folder browser window so that the tree structure is already opened at that folder. The problem is that it doesn't seem to work. No matter what I put, it has...
63
3442
by: David Mathog | last post by:
There have been a series of questions about directory operations, all of which have been answered with "there is no portable way to do this". This raises the perfectly reasonable question, why, in this day and age, does the C standard have no abstract and portable method for dealing with directories? It doesn't seem like a particularly difficult problem. For instance, this int show_current_directory(struct DIRSTRUCT *current_directory);
0
8616
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8552
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
8818
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6481
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5825
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4568
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2992
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2249
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1970
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.