ansaurus

Question

CSS How to apply child:hover but not parent:hover

Answer 1

A:

The easiest thing to do may be to use JS for this sort of CSS. Maybe you can try to rethink your implementation. Why are you trying to do something like this?

Tilo Mitra 2010-04-23 18:04:29

I have a large tree of elements and some of them will respond to a mouse click. I only want the element that will respond to the click to be highlighted.Doing this in javascript will mean styling based on mouseover/mouseout and will considerably bloat the code base.

CNelson 2010-04-23 18:13:43

It won't bloat the codebase - it will be about 4-5 lines of code, if you are using jQuery. In pseudocode:$('.parent').hover(function(){ ...set CSS to Green ...});$('.child').hover(function(){ this.parent.css(..set css to white..});

Tilo Mitra 2010-04-23 18:39:13

Answer 2

A:

This is not possible using plain-vanilla CSS. You're asking for a pseudo-class of a child (child:hover) to affect the background declaration of a parent. There's no way to specify that sort of thing using regular css.

This can definitely be done using javascript.

eykanal 2010-04-23 18:08:46

I'm not convinced this can't be done with CSS.I think I want to somehow change .parent:hover to only select if there are no child elements that have hover.This way the child would not affect the parent declaration, rather the parent selector would be more discerning.

CNelson 2010-04-23 18:17:59

No; that is precisely what the CSS designers have ruled out. It becomes near impossible to code, spec, and use that sort of model. In XPATH it is possible to use a parent selector, but there are no pseudo elements and classes to worry about there. It was a hard decision for them, but you *cannot* use CSS to allow child selectors to filter back up to affect the parent.

Nicholas Wilson 2010-04-23 20:14:02

Answer 3

+1 A:

So this is REALLY ugly, but it works (kind of). I'm basically creating a duplicate of parent as a sibling of child. parent-overwrite is hidden by default, then displayed on the hover of child. Chrome doesn't like it unless you use the + selector instead of the ~ selector. This isn't very scalable, but it may work.

As the other guys posted, javascript would likely be a better solution.

<style>
    .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
    .parent:hover { background-color: green; }
    .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
    .child:hover { background-color: blue; }
    .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
    .child:hover ~ .parent-overwrite { display: block; }
</style>

<div class="parent">
    <div class="child">Child</div>
    <div class="parent-overwrite"></div>
</div>

Bryan Downing 2010-04-23 19:38:58

Thanks for trying :) But ya, because of the scalability this won't work for me.

CNelson 2010-04-23 19:41:42

Lol +1 for making it possible.

Tilo Mitra 2010-04-23 19:59:47

Hahaha thanks, it was a fun problem to solve. I've totally run into this exact same problem before, but I think my solution was to manually change the class on the parent that didn't have a hover declaration. This wouldn't work for you though because you wanted the hover on your parent to work still. My programmer thought I was going to get severely down-voted for this ugly, ugly hack. Thanks for proving him wrong ;)

Bryan Downing 2010-04-23 21:58:14

Answer 4

A:

I can only do this with adding additional markup. An empty div needs to be added that essentially functions as the parent background. Take a look at the CSS here.

http://jsbin.com/ubiyo3/edit

RussellUresti 2010-04-23 19:57:41

ansaurus

tags:

views:

answers:

CSS How to apply child:hover but not parent:hover

related questions