Forum Moderators: not2easy

Message Too Old, No Replies

Affecting non-child with pseudo-classes?

Like using :hover to change an image that is not within the origin tag

         

kalisti

12:04 am on Oct 25, 2003 (gmt 0)

10+ Year Member



Hi,

I'm wondering if there is a way to use a pseudo class to affect something outside of the affecting tag.

For example, while ul:hover > li { display:block } would work for displaying an li that was previously hidden, within a ul, what I'd like to do is be able to affect one tag via another without having that structural requirement.

So that I could do something like p.first:hover * p.second { color:red }, where hovering over the first paragraph with class 'first' would change the color of the paragraph with class 'second' to red, even though they obviously wouldn't be nested.

Any clues on how to do this, or definitive answers as to whether it's impossible with css, would be appreciated.

Thank you,

Brendan

DrDoc

12:15 am on Oct 25, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can reference objects that are either descendants or siblings to the current element.

h1+p = a level one heading immediately followed by a paragraph
p * span = a span inside ANY element inside a paragraph

aevea

12:22 am on Oct 25, 2003 (gmt 0)

10+ Year Member



Unfotunately, ie only supports hovers on a tags and can't handle the sibling selector.

DrDoc

12:36 am on Oct 25, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, IE can hardly handle anything anyway...

kalisti

8:50 am on Oct 25, 2003 (gmt 0)

10+ Year Member



Dr. Doc, thank you for your post. However, I'm looking for something that doesn't only change a descendent or sibling, as it seems for my case that would force a break of structure.

In your example, it seems as though the <span> would have to be within the first paragraph, so could not really be affecting the second paragraph.

Theoretically for the example I gave in the beginning, I could so something like:

<p class="first">This is the first paragraph.<br /><span class="second">This is the second paragraph.</span></p>

And it would work with the descendent operator, but this is undesirable because it both fails to accurately portray the structure of the data, and breaks apart for any more complex situation.

What I'm wondering is if anyone knows whether css/css2 has the potential to let a :hover (or some other pseudoclass) over one element cause an effect on an element which occurs neither within or prior to the first. If there isn't such a function, is such a thing proposed for css3? It seems like such a simple thing, and would cure the need for some simple javascript (such as rollover image replacement--and yes, I have seen Eric's css rollover images, but I think a workaround that requires absolute positioning is not an ideal solution, and is of limited use).

Thanks for the feedback, I am not expecting that anyone knows of a way to do exactly what I want, but am curious and feel it is probably worth asking.

DrDoc

3:56 pm on Oct 25, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, there is a way, but it requires JavaScript...

kalisti

8:47 pm on Oct 25, 2003 (gmt 0)

10+ Year Member



nod, I have it working using DOM, was just hoping it would work with pure css. Guess I'll make a recommendation for the next standards :)