Can children ignore changes to parent display?

Question

If I establish a button that fades in or out on hover, the children fade with the parent. The children contain text, so I'd like to be able to make them ignore the fadeIn() or fadeOut() effects. I didn't have any luck with not() either.

I suspect some lack of knowledge on my part is to blame, because if it's just changing the CSS on the fly then there is probably not a great way to keep those changes from affecting the children as it does the parents.

It's simple code obviously but it is as follows, if it is relevant:

myButton.hover(function(){
    $(this).fadeTo(/*code to change the speed, etc etc*/);
        }, function(){
    $(this).fadeTo(/*reverse the changes, and so on*/);
    }
});

Is there a great way to have children ignore these kinds of changes to the parent?

Is the parent just a background and no text? (i.e. do you want to fade a background to transparent and leave the text?) — Ry-, Jun 25 '13 at 21:14
Yes. Parent is a div with a background color, child is a p with text. Background does not need to be transparent, just fade slightly to indicate it can be clicked. Losing the text in the fade is counterproductive in this situation — , Jun 25 '13 at 21:23
In short, NO. I would go further, but this question was kind of already answered here: http://stackoverflow.com/questions/12956937/display-html-child-element-when-parent-element-is-displaynone#answer-12956970 — SpYk3HH, Jun 25 '13 at 21:18

score 0 · Accepted Answer · answered Jun 25 '13 at 21:27

0

I would do this using CSS.

#myButton {
    background-color: rgb(0, 0, 0); /* Whatever colour it is */
    transition: background-color 0.5s ease; /* However long you want it to be */
}

#myButton:hover {
    background-color: rgba(0, 0, 0, 0.5); /* Whatever colour and fadedness you want it to be */
}

It degrades gracefully and can transition between any colours. You might want to add -webkit-transition and -moz-transition and -o-transition for compatibility, of course, and use #myButton:hover, #myButton:focus for keyboard focus.

answered Jun 25 '13 at 21:27

Ry-

218,210
55
464
476

oh noooo a CSS solve for my jQuery question :) haha I don't want this to be the only way to do it, but if it WORKS for me then so much the better – Jun 26 '13 at 06:55
@Stick: It’s not the only way, but transitioning colours with jQuery is less convenient than other things, so…. Does this work, though? Or do you need an IE9- fallback? – Ry- Jun 26 '13 at 13:18
It does and it doesn't :) It does exactly what I wanted, which is good; I'm guessing that if I need to apply this to the same kind of element (myButton) but have it work with different colors (ie blue buttons fade to lighter blue, red/yellow/green fade summarily), I just have some code copy/pasting in my future :/ No need for IE fallback, this is all in-office stuff, no IE to be found – Jun 26 '13 at 15:14

Can children ignore changes to parent display?

1 Answers1