CSS对A＆LT悬停效果; TD＆GT;不正常热锅如果＆所述; TD＆GT;有多个＆LT; D​​IV＆GT; S里面 [英] CSS on hover effect on a <td> does not wok properly if <td> has multiple <div>s inside it

问题描述

我有里面多个div表列以适应一个图标，标题和描述文字。此外，在鼠标悬停时，我需要提供一个亮点/叠加效应，突出所有列，包括div的图像，标题和描述文字。

下面是HTML

 ＆LT; TD＆GT;
  ＆LT; D​​IV的风格=显示：inline-block的;边界：1px的红色实心＆GT;左＆LT; / DIV＆GT;
   ＆LT; D​​IV的风格=显示：inline-block的＆GT;
   ＆LT; D​​IV的风格=显示：inline-block的;边界：1px的固体蓝＆GT;左上方＆LT; / DIV＆GT;
   ＆LT; D​​IV的风格=显示：inline-block的;边界：1px的纯绿色＆GT;右上方＆LT; / DIV＆GT;
   ＆LT; D​​IV＆GT;底部＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / TD＆GT;
 

当我用一个简单的CSS作用改变，如下列的背景，效果显示出来仅在个别的div而不是整个表列。我想，如果有任何的div中取得了鼠标，所有列应被突出显示。

CSS code

  #MyTable TD：悬停{
背景：#CCCCCC;
}
 

解决方案

您面前一个额外的空间：悬停：尝试用

  #MyTable TD：悬停{
   背景色：#CCC;
}
 

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.

Here is the 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 code

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

解决方案

you have an extra space before :hover : try with

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

这篇关于CSS对A＆LT悬停效果; TD＆GT;不正常热锅如果＆所述; TD＆GT;有多个＆LT; D​​IV＆GT; S里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！