hovers affecting other areas?

can a hover affect another area?

[JaOtEaY]

I have a table and when I hover over one cell, that cell's background image will change, and I was trying to get it to change the background color in the adjacent cells also... Any ideas?

[dominicc]

Stuff like this is sometimes possible, but not always, becuase CSS selectors don't really allow you to talk about other nodes without selecting them directly. For example, given the HTML:

 <div>
 <foo></foo>
 <bar></bar>
 </div>

If you wanted to color <bar> blue while <foo> was activated, you might try:

 div[foo:hover] bar
 {
 background-color:blue;
 }

This is not legal with CSS selectors, but is childs play with XPath's selector syntax. That leaves you three pure CSS options.

1. Use the descendant selector (IE compatible):
   

   
    div:hover bar
    {
    background-color:blue;
    }
   

   
   
2. Use the direct descendant selector:
   

   
    div:hover>bar
    {
    background-color:blue;
    }
   

   
   
3. Use the adjacent sibling selector:
   

   
    div foo:hover+bar
    {
    background-color:blue;
    }
   

   
   

In this case the first two work partially, and may give you what you want, and the last one is perfect. Still, which of these is useful (if any) depends on the structure of the HTML and what you want to achieve.

But, instead of creating a single rule, you can create complex rule sets that sometimes get you where you want to go. The first example, which is the only one that will work in IE, can be made fully functional like this:

 div:hover bar
 {
 background-color:blue;
 }
 div bar:hover
 {
 background-color:white;
 }

It takes a bit of getting your head round, but you can create rulesets with several selectors canceling other ones out, just to achieve a single effect. And all because CSS does not allow you to non-committal probing (ooh err!) like XPath does.

Dominic.

[dominicc]

Oops! The last solution should have read:

 div:hover *
 { 
 background-color:blue; 
 } 
 div foo:hover 
 { 
 background-color:white; 
 } 

[dominicc]

Man I knew this stuff was tricky. Okay, but this time I actually tested it!

   div:hover bar
   {
    background-color:blue; 
   }
   div bar:hover
   { 
    background-color:white; 
   }

[dominicc]

That's hillarious! The first solution was right along. I'm sorry I just spammed your thread with four posts.

[MatthewHSE]

How do you get any of this to work in IE? I thought it only supported the :hover pseudo-class on <a> tags. A shame, too, since one could otherwise create pure-CSS dropdown navigation systems, fully "crawlable" by the robots and not relying on script!

[DrDoc]

You are right -- IE, in its "less-than-partial" support for CSS does not support :hover on any elements other than anchors.

So, you're stuck between a rock and a hard place. Either you code for compliant browsers (if you can live with the fact that it doesn't work in IE) or you do something else. That "something else" would in this case be onmouseover and onmouseout attributes. That can get really messy, so make sure that you've tested it first.

If you decide to go for an all JavaScript solution, make sure to test in the other browsers as well, and use proper DOM syntax.

However, there's nothing stopping you from implementing a combination of the two. Use the adjacent sibling selector to get the exact effect you want, in compliant browsers. Then use onmouseover stuff to fake a similar behavior in IE. Works like a charm!

[DrDoc]

You might want to check this thread out as well:
[webmasterworld.com...]