Topic: can #myDiv:hover be used to change attributes on a seperate div? (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11044" title="Pages that link to Topic: can #myDiv:hover be used to change attributes on a seperate div? (Page 1 of 1)" rel="nofollow" >Topic: can #myDiv:hover be used to change attributes on a seperate div? <span class="small">(Page 1 of 1)</span>\$

smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 09-06-2003 20:40 Ok what I would like to do is to rollover one div and have the border of another div change. example: <html> <head> <style type="text/css"> #myDiv1 { background:#cccccc; width:100px; height:100px; } #myDiv2 { background:#cccccc; width:100px; height:100px; } #myDiv1:hover { border:solid 4px #000000; } </style> </head> <body> <div id="myDiv1"></div> <br /> <div id="myDiv2"></div> </body> </html> In this example you'll find in IE it does nothing (can't have :hover on anything other than 'a' elements) - but in moz you'll see when you mouseover the top div it gets a black border - simple. But what I want to do is mouseover the top div and have the border appear on the bottom div. I'm sure it's possible somehow, although maybe it's a part of css2 or css3 that isn't supported as yet. Please help if you can. Thanks
Veneficuz Paranoid (IV) Inmate From: A graveyard of dreams Insane since: Mar 2001	posted 09-06-2003 21:28 At the moment somthing similair to what you want is possible. The way to it to declare the hover style as: #myDiv1:hover #myDiv2 { ... } That one will change the style of myDiv2 when is the child of the element you hover over, in this case myDiv1. You can alse change it so it affects the element following the one hovered over (#myDiv1:hover + #myDiv2) or if it is the direct child ofthe element (#myDiv1:hover > #myDiv2). So the conclusion is that you can do what you want as long as you can express the relationship between the two elements in CSS. But support for this is a bit sketchy in most browsers... Check out Meyer's example to see how it might be done. _________________________ "There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero" [This message has been edited by Veneficuz (edited 09-06-2003).]
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 09-06-2003 21:30 [edit: Veneficuz beat me =) ] It may be possible with a complicated selector. From http://www.w3.org/TR/CSS2/selector.html , a selector E + F will match any element F preceded by an element E. Since your mouseover div is before the div you want to change, you're in luck, this should work: #myDiv1:hover + #myDiv2 {...} But even if it works in Mozilla, you can completely forget about it working in IE. Otherwise, you're probably going to have to use a script. [This message has been edited by Slime (edited 09-06-2003).]
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 09-06-2003 21:31 ...all of which won't work in IE If it's important that this work in all browsers, I'd suggest JavaScript. I'm no expert, but some DOM manipulation may be in order... [EDIT: Slime beat me... grr...] [This message has been edited by ozphactor (edited 09-06-2003).]
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 09-06-2003 22:09 Ok guys, thanks. I have looked into things like that a bit and got a little confused. It is more than likely that the context in which I would use this hover thing of mine wouldn't have divs neccessarily in any of the relationships specified. Which kinda sucks. I am already working on javascript solution using pseudo css in a custom attribute to declare a rollover style - this is working ok so far. I will then be trying to make http://www.pixy.cz/blogg/clanky/csshiermenu/ work in IE using a nothing more than a simple javascript in the head of the document. Basically the idea is to read thru the css with javascript and copy the attributes of off any :hover elements and attach these to their corresponding elements on the page using my script which allows the attaching of css code to elements that will work on mouseover. All very confusing for my little head, but I'm slowly getting there.

Topic: can #myDiv:hover be used to change attributes on a seperate div? (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11044" title="Pages that link to Topic: can #myDiv:hover be used to change attributes on a seperate div? (Page 1 of 1)" rel="nofollow" >Topic: can #myDiv:hover be used to change attributes on a seperate div? <span class="small">(Page 1 of 1)</span>\$

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 09-06-2003 20:40

Ok what I would like to do is to rollover one div and have the border of another div change.

example:

<html>
<head>

<style type="text/css">

#myDiv1 {
background:#cccccc;
width:100px;
height:100px;
}

#myDiv2 {
background:#cccccc;
width:100px;
height:100px;
}

#myDiv1:hover {
border:solid 4px #000000;
}

</style>

</head>
<body>

<div id="myDiv1"></div>

<br />

<div id="myDiv2"></div>

</body>
</html>

In this example you'll find in IE it does nothing (can't have :hover on anything other than 'a' elements) - but in moz you'll see when you mouseover the top div it gets a black border - simple. But what I want to do is mouseover the top div and have the border appear on the bottom div. I'm sure it's possible somehow, although maybe it's a part of css2 or css3 that isn't supported as yet.

Please help if you can.

Thanks

Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

posted 09-06-2003 21:28

At the moment somthing similair to what you want is possible. The way to it to declare the hover style as:
#myDiv1:hover #myDiv2 { ... }
That one will change the style of myDiv2 when is the child of the element you hover over, in this case myDiv1. You can alse change it so it affects the element following the one hovered over (#myDiv1:hover + #myDiv2) or if it is the direct child ofthe element (#myDiv1:hover > #myDiv2). So the conclusion is that you can do what you want as long as you can express the relationship between the two elements in CSS.

But support for this is a bit sketchy in most browsers...

Check out Meyer's example to see how it might be done.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"

[This message has been edited by Veneficuz (edited 09-06-2003).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 09-06-2003 21:30

[edit: Veneficuz beat me =) ]

It may be possible with a complicated selector. From http://www.w3.org/TR/CSS2/selector.html , a selector E + F will match any element F preceded by an element E. Since your mouseover div is before the div you want to change, you're in luck, this should work:

#myDiv1:hover + #myDiv2 {...}

But even if it works in Mozilla, you can completely forget about it working in IE.

Otherwise, you're probably going to have to use a script.

[This message has been edited by Slime (edited 09-06-2003).]

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 09-06-2003 21:31

...all of which won't work in IE

If it's important that this work in all browsers, I'd suggest JavaScript. I'm no expert, but some DOM manipulation may be in order...

[EDIT: Slime beat me... grr...]

[This message has been edited by ozphactor (edited 09-06-2003).]

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 09-06-2003 22:09

Ok guys, thanks.

I have looked into things like that a bit and got a little confused. It is more than likely that the context in which I would use this hover thing of mine wouldn't have divs neccessarily in any of the relationships specified. Which kinda sucks.

I am already working on javascript solution using pseudo css in a custom attribute to declare a rollover style - this is working ok so far.

I will then be trying to make http://www.pixy.cz/blogg/clanky/csshiermenu/ work in IE using a nothing more than a simple javascript in the head of the document. Basically the idea is to read thru the css with javascript and copy the attributes of off any :hover elements and attach these to their corresponding elements on the page using my script which allows the attaching of css code to elements that will work on mouseover.

All very confusing for my little head, but I'm slowly getting there.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: can #myDiv:hover be used to change attributes on a seperate div? (Page 1 of 1)

Insert Slimies »

Insert UBB Code »