[英]CSS Hover Not Working in Google Chrome
I have a table with a hover affect on the rows. 我有一个在行上具有悬停效果的表。 It works fine in Internet Explorer, but when testing in Chrome, the right hand corner of the row color gets messed up. 它在Internet Explorer中可以正常工作,但在Chrome中进行测试时,行颜色的右上角会弄乱。 It isn't fully hovering. 它并没有完全盘旋。 Any suggestions? 有什么建议么? Here is a link to the code: http://codepen.io/ChaseHardin/pen/DyuEf or code below. 这是代码的链接: http : //codepen.io/ChaseHardin/pen/DyuEf或下面的代码。
HTML: HTML:
<table class="tableStyle hoverTable">
<thead>
<tr>
<th class="theadCustom"></th>
<th class="theadCustom"></th>
<th class="theadCustom"></th>
</tr>
</thead>
<tbody>
<tr class="even myHover">
<td class="tdCustom">85% $CEZ</td>
<td class="tdCustom">Top 1% $F</td>
<td class="tdCustom">10% $BMI</td>
</tr><!-- Table Row -->
<tr class="odd myHover">
<td class="tdCustom">BW: 91 lbs</td>
<td class="tdCustom">WW: 781 lbs</td>
<td class="tdCustom">YW: 1,420 lbs</td>
</tr><!-- Darker Table Row -->
</tbody>
</table>
CSS: CSS:
.tableStyle {
border: #ccc 2px solid;
padding: 15px;
text-align: center;
font-family: "Gabriola";
font-size: 25px;
margin: 0;
margin-left: auto;
margin-right: auto;
}
.even {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.odd {
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.tdCustom {
border: #ccc 2px solid;
padding: 15px;
}
.theadCustom {
padding:21px 25px 22px 25px;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
.myHover:hover {
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}
* {
margin: 0;
}
.hoverTable {
width: 80%;
border-collapse:collapse;
margin: 0;
margin-left: auto;
margin-right: auto;
}
It's a result of the paddining: 15px
on the .tableStyle
element. 这是paddining: 15px
的结果paddining: 15px
.tableStyle
元素上为paddining: 15px
。 Removing that resolves the issue without affecting the display. 删除后即可解决问题,而不会影响显示。
.tableStyle {
border: #ccc 2px solid;
text-align: center;
font-family: "Gabriola";
font-size: 25px;
margin: 0 auto;
}
If you want to add padding to the table
element, you should use border-spacing: 15px
instead. 如果要向table
元素添加填充,则应使用border-spacing: 15px
代替。 It's worth noting that the border-collapse
property value needs to be separate
rather than collapse
in order for border-spacing
to have an effect. 值得注意的是, border-collapse
属性值需要separate
而不是collapse
,才能使border-spacing
生效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.