can :hover modify non-descendant elements?

[Ciphex]

Hi guys,

Perhaps I am missing something or perhaps this is just not possible in CSS right now.

I have a table: one row, three colums.
In columns 1 & 3 I have some buttons.
I am trying to set it up so that div's in column 2 will become visible on rollover.

I am aware of the issue in IE where only anchored elements will respond to :hover.
This should not be a problem though as these buttons are links.

Do I HAVE to to use JavaScript here or is there a way to do this using only CSS?


My test site is http://www.healingwatersalon.com

The div element to appear is set to invisible and has id #HomeBtn
It is easy to find in the HTML.

Any light you guys could shed on this for me would be greatly appreciated.

~John

[sharkey]

For a cross browser solution i would say you would have to use some javascript.

[zachzach]

Not possible :(

To my knowlage (http://www.zachblog.com)

[Stephen Philbin]

If you go the path of Javascript, be sure to make it the javascript that makes your page inaccessible to those without javascript, rather than the html or css.

[Ciphex]

Well it's a shame thats pure CSS won't handle it but I figured such would be the case.


But...
If you go the path of Javascript, be sure to make it the javascript that makes your page inaccessible to those without javascript, rather than the html or css.

Im not exactly certain I know what you are saying here.

Care to elaborate?

[Stephen Philbin]

It's kinda obvious but I've seen plenty of people do it.

That is to have the html and css create a page with parts that are not accessible by default, and then rely on javascript to make these parts accessible (by means of a mouseover or click or whatever).

A much better course of action would be to have the html and css build an accessible page (much like how it would be when the mouse over or click or whatever happens) and then use an onload event to make the elements etc hidden and thusly inaccessible to people that don't have javascript. Javascript is completely useless for many things, and especially useless at making a page inaccessible to people that don't actually have javascript. Whereas html and css are very efficient at making pages inaccessible to those without Javascript. Catch my drift now?

Like I said, it's kinda obvious I know, but it is simple enough to easily overlook and forget about it.

[Ciphex]

yes catch ur drift now m8.
:cool:

[pawky]

got it! yea, im happy because i actually can figure things out on my own now :P ok, here's how i got it to work:


<style>
#HomeBtn {
width: 100px;
height: 50px;
color: green;
font: bold 1.5em Georgia, "Times New Roman", Times, serif; font-variant: small-caps;
background-color: #fff; text-align: center;
visibility: hidden;
position: relative;
z-index: 2;
top: 35px;
left: 0;
border: 1px solid silver;
border-left-color: white;
}
#top:hover #HomeBtn {
visibility: visible;
}
</style>

<div id="top"><div id="HomeBtn">Home</div></div>



now, it wont work in IE so use the following link to fix that part:
http://www.vladdy.net/Demos/iepseudoclassesfix.html

and that should do it for ya :D i hope that's what you were wanting to do ;)

[Ciphex]

yes that works. but in that code the element to be made vidible is contained inside the div that is hovered over.

i am trying to hover over DIV1 and have DIV2 (in a different table or cell) become visible.

CSS seems to be limited in that psuedo class effects can only be applied to descendant elements.

Anyone have any idea if this is changing in CSS3?

-John

[pawky]

Originally posted by Ciphex
yes that works. but in that code the element to be made vidible is contained inside the div that is hovered over.

i am trying to hover over DIV1 and have DIV2 (in a different table or cell) become visible.

CSS seems to be limited in that psuedo class effects can only be applied to descendant elements.

Anyone have any idea if this is changing in CSS3?

-John

if u change your site over to complete css you will be able to do more with it. i have to get some slp now so cant look at it atm, but i think a complete css site would help ya :D

[Ciphex]

well.. .can anyone suggest a sample javascript i might consider for this?

I'm not much of a java programmer.

-John

[Stephen Philbin]

Do you mant mousing over different cells to dive different contents to the middle one or the same thing appears in the middle one regadless of what you mouse over?

[Ciphex]

i need a different div for every item.

like you see here:

http://www.healingwatersalon.com

but this example is broken in IE 5 and 6 in different ways. though done in pure CSS.

-John