1

Is it possible to affect the parent object on user hover over it's child in just CSS3?

i.e.

<div class="random">
<img src="image.png">
</div>

.random img:hover {
   somehow affect .random?
}

I know it's pretty easy to do with JQuery, JS etc. But want to steer away from JS as much as possible.

raininglemons
  • 462
  • 1
  • 4
  • 11
  • 1
    At the moment this is not possible, but there is a discussion about introducing a parent selector in CSS. – Sirko May 07 '13 at 18:24
  • 1
    Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) (the [accepted answer](http://stackoverflow.com/a/1014958/419956) mentions CSS2, CSS3, and CSS4) – Jeroen May 07 '13 at 18:24
  • Ah shame that, cheers for the answer though. And sorry couldn't find that previous asked question. – raininglemons May 07 '13 at 18:55

1 Answers1

1

Using ONLY css is impossible today, but if you want to do simple things, like changing the parent's background when you hover the inner element, you can simulate the background using a sibling. This way you will be able to achieve the result using the "+" selector.

<div class="container">
    <span class="content">something</span>
    <span class="bg"></span>
</div>

However, to do this, you'll have to work using absolute positioning and deal with it's side effects, like centering things and explicit dimensions, here's an example: http://jsfiddle.net/PYN6P/

Luciano Santos
  • 201
  • 1
  • 2