CSS for hover that includes all child elements

Question

I have a draggable div element with a hover style. This works fine, but the div contains some form elements (label, input). The problem is that when the mouse is over these child elements the hover is disabled.

<div class="app_setting">
  <label">Name</label>
  <input type="text" name="name"/>
</div>

.app_setting:hover {
  cursor:move;
}

Any ideas how to get the hover to apply also to the child elements?

Answer 1

.app_setting *:hover { cursor:move }

Answer 2

At least 2 ways of doing it:

• hover states for each child, either explicitly or with * selector, as suggested by garrow .class *:hover
• cascade hover state to children .class:hover *

There are probably others

Answer 3

You might have to resort to JS to make it happen for IE6.

Answer 4

This isn't a css answer, but it might still be useful to you. Someone else already suggested that you might have to resort to javascript for browser compatibility. If you do resort to javascript, you can use the jquery library to make it easy.

$('.appsetting').hover(hoverInFunc,hoverOutFunc);

This sets an event handler for hovering into and out of the selected element(s) as matched by the css style selector in the $() call.