Question

我所拥有的是具有CSS风格的html页面，我在这里创建了一个带有样式的表格是我的

代码：HTML

<table class="table2" align="right">
<tr>
    <td width="193" class="td2">
          <div class="button"><img src="images/b2.png" /></div>
    </td>
    <td width="5" rowspan="9" ></td>
    <td width="193" class="td2"></td>
    <td width="5" rowspan="9" ></td>
    <td width="193" class="td2"></td>
    <td width="5" rowspan="9" ></td>
    <td width="193"  class="td2"></td>
    <td width="5" rowspan="9" ></td>
    <td width="193"  class="td2"><div class="button"><img src="images/b1.png" /></div></td>
    <td width="5" rowspan="9" ></td>
    <td width="143"  class="td4"  bgcolor="#76BC76"><center><img src="images/r1.png" /></center></td>
</tr>
<tr>
    <td width="193" class="td1" ></td>
    <td width="193" class="td1" ><div class="button"><img src="images/b4.png" /></div></td>
    <td width="193" class="td1" ></td>
    <td width="193"  class="td1"><div class="button"><img src="images/b3.png" /></div></td>
    <td width="193"  class="td1"></td>
    <td width="143"  class="td4" bgcolor="#76BC76"><center><img src="images/r2.png" /></center></td>
</tr>
</table>

代码：CSS

.button {
    width:180px;
    text-align:center;
    background:rgb(51,153,51);
    position:relative;
    overflow:hidden;
    margin-top:7px;
      margin-bottom:10px;
        margin-left:7px;

     /* add this */
}
.button a{
    display:block;
    height:37px;
    color:white;
    line-height:100px;
    text-decoration:none;
    position:relative;
    z-index:10;
}
.button:before {
    content:" ";
    display:block;
    width:180px;
    height:37px;
    background:rgba(0,0,0,0.5);
    position:absolute;
    left:0;
    top:100%;
    transition:all 0.5s;
}
.button:hover:before {
    top:0;
}
.wrapper {
    width:1160px;
    overflow: hidden;
     direction:rtl;
      /* add this to contain floated children */
}
table.table2 td.td1{
    margin-top: 10px; 
    margin-bottom: 10px; 
    padding: 0px 0px 0px 0px;
    border-left:1.0px solid #000;
    border-right:1.0px solid #000;
    border-bottom:1.0px dashed #666;
    border-spacing:5px;
}

table.table2 {
    border-collapse: collapse;

}
table .table1 td {


    margin-top: 10px; 
    margin-bottom: 10px; 
    padding: 0px 0px 0px 0px;

    border-spacing:5px;
}
table .table1{
    border-collapse: collapse;

}

悬停在按钮上的工作就好了谷歌Chrome ..为什么它不适用于IE？我已经尝试了版本9,10,11，所有这些都只给我带来任何影响的图像。

注意：所有图像都是透明的，所以我可以看到它们的效果。有人可以帮忙吗？

为什么我的悬停按钮在内部不起作用？

0 个答案: