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

时间:2017-03-11 12:29:28

标签: html css

你好我有一个由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覆盖甚至是图像的背景是白色的,所以它不应该有任何影响???

0 个答案:

没有答案