如果里面有多个，那么在上悬停效果的CSS就无法正常运行[英]CSS on hover effect on a does not wok properly if has multiple s inside it 本文翻译自 user1006072 查看原文 2013-04-12 20080 hover/

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

you have an extra space before :hover : try with

你之前有一个额外的空间:悬停:试试

#MyTable td:hover { 
   background-color: #ccc;
}

#2

#MyTable td:hover {
  background: #cccccc;
}

i think problem is you should use ":" right after "td"

我认为问题是你应该在“td”之后使用“:”

#3

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