用于悬停的CSS，包括所有子元素

Question

我有一个带有悬停样式的可拖动div元素。这工作正常，但div包含一些表单元素（标签，输入）。问题是当鼠标悬停在这些子元素上时，悬停被禁用。

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

.app_setting:hover {
  cursor:move;
}

如何将悬停应用于子元素？

Answer 1

.app_setting *:hover { cursor:move }

Answer 2

至少有两种方法：

• 根据garrow *
的建议，明确地或使用.class *:hover选择器为每个孩子悬停状态
• 级联悬停状态给孩子.class:hover *

可能有其他人

Answer 3

这不是一个css答案，但它可能对你有用。

其他人已经建议您可能需要使用javascript来兼容浏览器。如果你使用javascript，你可以使用jquery库来轻松实现。

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

这将设置一个事件处理程序，用于悬停进出$()调用中的css样式选择器匹配的所选元素。

Answer 4

您可能不得不求助于JS来实现IE6。