包含所有子元素的悬停 CSS答案

【问题标题】：CSS for hover that includes all child elements包含所有子元素的悬停 CSS
【发布时间】：2008-09-26 02:43:33
【问题描述】：

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

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

.app_setting:hover {
  cursor:move;
}

任何想法如何让悬停也适用于子元素？

【问题讨论】：

标签： html css

【解决方案1】：

.app_setting *:hover { cursor:move }

【讨论】：

与所有 css 规则一样，您可能必须使用 .app_setting *:hover { cursor:move !important; } 来覆盖您在 css 规则中其他地方的子元素上设置的任何光标
使用 Firefox，（诚然几年后）这不起作用。它实际上比提问者最初的尝试更有效（使用 !important 与否）

【解决方案2】：

至少有两种方法：

可能还有其他人

【讨论】：

【解决方案3】：

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

其他人已经建议您可能不得不求助于 javascript 以实现浏览器兼容性。如果您确实使用 javascript，您可以使用 jquery 库来简化它。

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

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

【讨论】：

【解决方案4】：

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

【讨论】：