：悬停在firefox上工作，而不是在chrome上，即

Question

我用this简单的css悬停动画创建了一个页面，但我刚刚注意到它只适用于firefox。 为什么？

我测试了一些js但是我的结果相同。

它不应该使用绝对pos，也不应该使用js。

/*$(document).ready(function() {
	$(".wdcol").on({
        mouseenter: function () {
        	var _id=$(this).attr('data-id');
        	$(".floatbox")[_id].style.cssText="top:-24%;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;";
		},
        mouseleave: function () {
        	var _id=$(this).attr('data-id');
        	$(".floatbox")[_id].style.cssText="top:5%;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;";
       	}
	});
});*/

.wrap {
    margin-right:0px;
    padding:5px;
    height:19vw;
    margin-right:2px;
    background:#b5e7dc;
    border:solid 1px black;
    white-space: nowrap;
    overflow:hidden;
    cursor:pointer;
}
table.wdtable {
    width:100%;
    background:#c0dce6;
    border:dotted 1px black;
    overflow:hidden;
}
td.wdcol {
    width:33%;
    background:#c0dce6;
    border:dotted 1px black;
}
.floatbox {
    position:relative;
    display:block;
    padding:10px;
    padding-bottom:50px;
    background:#c8e5df;
    border:dashed 1px black;
    top:5%;
    z-index:1;
    cursor:initial;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
td.wdcol:hover .floatbox {
	top:-24%;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

<div class="wrap">
    <table class="wdtable">
      <tbody>
        <tr>
          <td class="wdcol" data-id='0'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%"/>
            <div class="floatbox">
                .floatbox1<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='1'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%;"/>
            <div class="floatbox">
                .floatbox2<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='2'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%"/>
            <div class="floatbox">
                .floatbox3<br/>FLOATS ON TOP
            </div>
          </td>
        </tr>
      </tbody>  
    </table>
</div>

Answer 1

我无法准确回答“为什么”它不起作用的问题。我认为这与不同浏览器中表集的不同实现有关...

但是我可以给你一个可行的版本。而不是使用div容器的相对位置，使用绝对容器并使表格单元格相对：

td.wdcol {
    position: relative;
}

.floatbox {
    bottom: -70%;
    left: 0;
    position: absolute;
    right: 0;
}

td.wdcol:hover .floatbox {
    bottom: -24%;
}

演示：JSFiddle

Answer 2

将top更改为margin-top＆amp; td vertical-align:top;

＆＃13;

＆＃13;

/*$(document).ready(function() {
	$(".wdcol").on({
        mouseenter: function () {
        	var _id=$(this).attr('data-id');
        	$(".floatbox")[_id].style.cssText="margin-top:-24%;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;";
		},
        mouseleave: function () {
        	var _id=$(this).attr('data-id');
        	$(".floatbox")[_id].style.cssText="margin-top:5%;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;";
       	}
	});
});*/

＆＃13;

.wrap {
    margin-right:0px;
    padding:5px;
    height:19vw;
    margin-right:2px;
    background:#b5e7dc;
    border:solid 1px black;
    white-space: nowrap;
    overflow:hidden;
    cursor:pointer;
}
table.wdtable {
    width:100%;
    background:#c0dce6;
    border:dotted 1px black;
    overflow:hidden;
}
td.wdcol {
    width:33%;
    background:#c0dce6;
    border:dotted 1px black;
    vertical-align:top;
}
.floatbox {
    position:relative;
    display:block;
    padding:10px;
    padding-bottom:50px;
    background:#c8e5df;
    border:dashed 1px black;
    margin-top:5%;
    z-index:1;
    cursor:initial;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
td.wdcol:hover .floatbox {
	margin-top:-24%;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

＆＃13;

<div class="wrap">
    <table class="wdtable">
      <tbody>
        <tr>
          <td class="wdcol" data-id='0'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%"/>
            <div class="floatbox">
                .floatbox1<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='1'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%;"/>
            <div class="floatbox">
                .floatbox2<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='2'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%"/>
            <div class="floatbox">
                .floatbox3<br/>FLOATS ON TOP
            </div>
          </td>
        </tr>
      </tbody>  
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;