如果 <td> 中包含多个 <div> ，则 <td> 上的悬停效果的 CSS 无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15971600/
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 on hover effect on a <td> does not wok properly if <td> has multiple <div>s inside it
提问by user1006072
I have a table column with multiple divs inside it to fit in an icon, title and description text. Also, on mouse over, I need to provide a highlight /overlay effect that highlights all of the column including the divs image, title and description text.
我有一个包含多个 div 的表格列，以适应图标、标题和描述文本。此外，在鼠标悬停时，我需要提供一个突出显示/覆盖效果，突出显示所有列，包括 div 图像、标题和描述文本。
Here is the HTML
这是 HTML
<td>
<div style="display:inline-block; border:1px solid red">left</div>
<div style="display:inline-block">
<div style="display:inline-block; border:1px solid blue">top left</div>
<div style="display:inline-block; border:1px solid green">top right</div>
<div>bottom </div>
</div>
</td>
When I use a simple CSS effect to change the background of the column as below, the effect shows up only on individual divs but not the entire table column. I want that if any of the divs get a mouse over, all of the column should be highlighted.
当我使用简单的 CSS 效果更改列的背景时，如下所示，效果仅显示在单个 div 上，而不显示在整个表格列上。我希望如果任何 div 被鼠标悬停，所有列都应该突出显示。
CSS code
CSS代码
#MyTable td :hover {
background: #cccccc;
}
回答by Fabrizio Calderan
you have an extra space before :hover: try with
你之前有一个额外的空间:hover：试试
#MyTable td:hover {
background-color: #ccc;
}
回答by tcgumus
#MyTable td:hover {
background: #cccccc;
}
i think problem is you should use ":" right after "td"
我认为问题是你应该在“td”之后使用“:”
回答by Chris_W
It seems you need to delete the space before hover
看来你需要在悬停之前删除空格
#MyTable td:hover {
background: #cccccc;
}
See fiddle here: http://jsfiddle.net/wooder89/eUCG5/
请参阅此处的小提琴：http: //jsfiddle.net/wooder89/eUCG5/
