:hover 在 firefox 上工作，而不是在 chrome 上工作，即

Question

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

我用一些 js 进行了测试，但结果相同。

不要用absolute 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

我无法准确回答这个问题 "why" 它不起作用。我认为这与table集在不同浏览器中的不同实现有关…

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

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 & td vertical-align:top;

/*$(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;";
        }
 });
});*/

.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;
}

<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>

:hover 在 firefox 上工作，而不是在 chrome 上工作，即

:hover working on firefox, not on chrome, ie

html

css

google-chrome

hover