1

is it possible to effect a parent node based on a child node's :hover state? ie.

nav ul li a:hover {
  /* something here to effect the li or the ul or the nav elements */
}

not that bothered about compatibility, I am looking to be using latest firefox/chrome and ie9/10 only based on the target audience of the app. So CSS3 and browser specific CSS is fine, though I would like to avoid jQuery (and javascript in general) if possible.

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
  • 2
    No, with CSS this is ([so far/currently](http://dev.w3.org/csswg/selectors4/#overview)) impossible (http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector, http://stackoverflow.com/questions/9115487/css-selectors-if-child-class-then-select-the-parent (among many, *many* others). If it must be done, use JavaScript. – David says reinstate Monica May 05 '13 at 17:46

2 Answers2

2

Its not possible right now, as you can only style downstream siblings or descendants while hovering other another element (as of Selectors Level 3)

However, when Selectors Level 4 becomes stable and UA's start implementing it, you can eventually use the parent combinator - e.g.

<h2>Hello<span>World</span></h2>

h2! > span:hover {
background: azure; /*the h2 background changes while hovering over the span */
}
Jason Yaraghi
  • 51,338
  • 11
  • 87
  • 88
  • I was wondering where did this answer go :) – Pierre May 05 '13 at 17:47
  • 1
    I notice you're linking to the latest (2nd May) draft - that revision of the draft includes a note about fast/complete profiles, which basically excludes `!` from the fast profile, in turn excluding it from being used in CSS. Also see my latest comment on the accepted answer in the dupe. – BoltClock May 05 '13 at 18:00
0

You should better use javascript onmousehover event instead. Something like,

<script>
function onhoverstylechange()
{
    document.getElementById("id").style.color='red';
}
</script>
<div id="id">
    <a href="#" onmouseover="onhoverstylechange()">Change</a>
</div>

and just apply any css or css file in the javascript function.

Jayant
  • 152
  • 9
  • Please don't hard-code the `id` with this, just use (if you *must* use in-line JavaScript) `onmouseover="onHoverStyleChange(this, 'color','#f00')"` and (in the function) `elem.parentNode.style[property] = value;`. Your current approach requires a separate function for every element to whose parent should change `onmouseover`, *and* for ever property to be changed therein. – David says reinstate Monica May 05 '13 at 17:51