33

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?

Toby Hede
  • 36,755
  • 28
  • 133
  • 162

4 Answers4

43
.app_setting *:hover { cursor:move }
garrow
  • 3,459
  • 1
  • 21
  • 24
  • 1
    like with all css rules you might have to use `.app_setting *:hover { cursor:move !important; }` to override any cursor you may have set on child elements elsewhere in you css rules – Stefan Haberl Feb 12 '13 at 12:51
  • 2
    Using Firefox, (admittedly some years later) this does not work. It actually works even less effectively than the questioners original attempt (using !important or not) – PandaWood Jul 31 '15 at 13:15
30

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

Linus Caldwell
  • 10,908
  • 12
  • 46
  • 58
seanb
  • 6,969
  • 2
  • 33
  • 34
2

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.

boz
  • 4,891
  • 5
  • 41
  • 68
Mnebuerquo
  • 5,759
  • 5
  • 45
  • 52
  • 1
    +1, also consider hoverIntent, it's a plugin that I think is much better than default .hover method. – alex Jun 15 '09 at 01:46
1

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

Jonathan Arkell
  • 10,526
  • 2
  • 24
  • 32