Html 包含所有子元素的用于悬停的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/137449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS for hover that includes all child elements
提问by Toby Hede
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 元素。这工作正常，但 div 包含一些表单元素（标签、输入）。问题是当鼠标悬停在这些子元素上时，悬停被禁用。
<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?
任何想法如何让悬停也适用于子元素？
回答by garrow
.app_setting *:hover { cursor:move }
回答by seanb
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 *
*正如 garrow 所建议的那样，每个孩子的悬停状态，无论是显式还是使用选择器.class *:hover- 级联悬停状态给孩子
.class:hover *
There are probably others
可能还有其他人
回答by Mnebuerquo
This isn't a css answer, but it might still be useful to you.
这不是一个 css 答案，但它可能仍然对您有用。
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.
其他人已经建议您可能不得不求助于 javascript 以实现浏览器兼容性。如果您确实使用 javascript，则可以使用 jquery 库来简化。
$(".appsetting").hover(hoverInFunc,hoverOutFunc);
$(".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.
这将设置一个事件处理程序，用于将鼠标悬停在与$()调用中的 css 样式选择器匹配的选定元素中。
回答by Jonathan Arkell
You might have to resort to JS to make it happen for IE6.
您可能不得不求助于 JS 来实现 IE6。
