Is there a way to style another CSS-based element: hover selector (where the hovering element and the affecting one are not in a relationship)

Question

Here in the example, the hover fiddle over a changes the background color of the first pair to red

• Since a and #p1 are siblings

• And this method (by changing the selector in b / w) will work if there is any parent (direct or nested) b / w both elements

  but I am looking for:
  Is there a way to change the background color of the second pair when the mouse freezes over a ;

---

Note. . I know that I can do this using JavaScript / jQuery, but I'm looking for a css way.

---

Answer 1

CSS4 will provide this functionality . Unfortunately, for you, however, this is not a finalized specification, and it is not implemented in any browser. (even if it is implemented in browsers, it will take some time to get a sufficient base for installation so that it can be used in everyday CSS code).

Now your only realistic option is Javascript. (this view is of course dead easily in jQuery)

Answer 2

UPDATED: Still with some really funky finale!

Believe it or not, this code works in FF, Chrome, IE9 and 10 to do what you want ( see example ). Yes, this is a “hack,” as Pumbaa80 noted. But I like to make “working” hacks for things that seem impossible. Yes, because of the "hacking" it will not work in all situations (maybe not in your "real" situation in the world).

Achieved Update

• I believe that I developed a small bug in FF and Chrome that would make it sometimes still display when not only <a> .
• I figured out how to get IE to work by putting the body:before pseudo-element in z-index: -1 between #p1 ( z-index: -2 ) and the parent of div #out . To work :before must have a background-color , and then opacity: 0 (without it, as if it didn’t even exist for "blocking" purposes). Understand that there are at least two side effects (possibly several others) of this blocking: (a) The links in #p1 will not be clickable, and (b) since the OP is marked in the comment, the text in #p1 will not be selected .

Here is the modified code mostly just for the effect, but I added the combined code for the original effect #p1 hover to now disable #out:hover . However, the code does that only <a> inside #out launches that #out:hover :

 body:before { /* used to "block" hover of #p1 triggering */ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: cyan; opacity: 0; } #out { height: 0; /* no height of its own; helped the FF/Chrome occasional miss-hover bug */ } #out:hover #p1, /* revised #p1 hover code */ #out:hover + div p { /* hover of #out triggers for #sec */ background-color: red; } #out a { float: left; /* helps cause #out to only trigger on anchor */ } #p1 { float: left; /* clears the anchor */ width: 100%; /* keeps it normal div width of 100% */ position: relative; /* needed for z-index */ z-index: -2; /* allows #out to only trigger on anchor and not #p1 hover */ } #sec { clear: left; /* clears floats above it so layout remains as it was */ } 

Obviously, out-of-relationship elements are a major issue with a clean CSS solution. What I tried to achieve here (mostly successfully for the main browsers ... that know about mobile, etc. Browsers) capitalizes the relations of the parent element in such a way that it makes only <a> freeze (within this, the first parent element) is the only trigger for :hover the parent element itself, so I could use it to create freezing effects for all <p> elements.