Question

你好我有一个由div组成的表，并将显示设置为table，table-row，table-cell。在这些表格单元格（nth-child（1）除外）上，我有一个灰色线条的背景图像，我将其设置为整个单元格，如下面的屏幕截图所示。现在这对我来说是一个先进的CSS技术，因为我不是一个真正的网页设计师，而是一个软件工程师，但是我需要将行的背景颜色变为灰色，因为图像的背景是白色的，但事实并非如此。如果我没有解释清楚，下面的截图显示了所需的效果。我的问题只是基于我如何做这个ON HOVER效应。

我的html代码示例是这样的

<div class="tableName">
 <div class="tableRow">
  <div class="tableCell">
   <span><!--random data --></span>
  </div>
  <div class="tableCell">
   <span><!--random data --></span>
  </div>
 </div>
</div>

我的css代码

.trafficTable{
   display:table;
   border-collapse: collapse;
   width:100%;
 }
.trafficRow{
   display:table-row;
   width:100%;
}
.trafficRow:nth-child(1){
  color:#FFFFFF;
}
.trafficCell{
  display:table-cell;
  border:1px solid #b3b3b3;
  text-align:center;
  vertical-align: middle;
  width:13.5%;
  font-size:13px;
  background-image:url("/images/strike.png");
  background-size:100% 100%;
  background-color:#424F90;
  cursor:pointer;
 }
 .trafficCell:nth-child(1){
   width:5%; 
  background-image: none !important;
  color:#FFFFFF;cursor:default;
}
 .trafficRow:nth-child(1) .trafficCell{
   background-color:#F79B2E !important;
   background-image: none !important;
   cursor:default;
 }
 .trafficRow:nth-child(1) .trafficCell:hover{
    background-color:#F79B2E !important;
 }
  .trafficRow:nth-child(1):hover{
     background-color:#F79B2E !important;
 }
  .trafficCell:hover{background-color:#BA0C2F !important;}
  .trafficCell:nth-child(1):hover{background-color:#424F90 !important;}
  .trafficRow:hover::before{
    background-color:#e6e6e6 !important;
    content: '';
    height:100%;
    width:100%;
    display:block;
  }


  .trafficCell span{
    display:inline-block;
    min-height: 182px; 
    width:100%;
   font-weight:900;
 }

请注意，显然类名与css名称匹配。答案一定不能用不透明度来做。我已经尝试了很多东西，包括我在这里找到的技术（唯一一个关于我最接近这个场景的方法）和:: before伪选择器，仍然没有用。

所承诺的效果截图： Desired Effect

编辑：我想人们会误解我的问题。屏幕截图中显示的所需效果显示了对HOVER的所需效果。我知道你不能将表格单元格悬停，直到CSS4退出并且父选择器已经出来，这就是为什么我会用javascript / jquery做的，基本上我要问的是为什么背景颜色会被背景img覆盖甚至是图像的背景是白色的，所以它不应该有任何影响???

背景颜色和背景img在翱翔表细胞

0 个答案: