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
#MyTable td :hover {
background: #cccccc;
}
3 个解决方案
#1
7
you have an extra space before :hover
: try with
你之前有一个额外的空间:悬停:试试
#MyTable td:hover {
background-color: #ccc;
}
#2
1
#MyTable td:hover {
background: #cccccc;
}
i think problem is you should use ":" right after "td"
我认为问题是你应该在“td”之后使用“:”
#3
0
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/
#1
7
you have an extra space before :hover
: try with
你之前有一个额外的空间:悬停:试试
#MyTable td:hover {
background-color: #ccc;
}
#2
1
#MyTable td:hover {
background: #cccccc;
}
i think problem is you should use ":" right after "td"
我认为问题是你应该在“td”之后使用“:”
#3
0
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/