jquery - 谁能告诉我为什么悬停 Action 在 append 框中不起作用？

Question

我正在尝试做一些简单的事情，但我遇到了这个问题。

当我通过按钮插入新框时，悬停操作在 append 框中不起作用。

这是一个例子:jsfiddle

$("#insert").click(function() {

  $("body").append('<div class="box"><div class="inside-box"></div></div>');

});

Answer 1

您可以通过 CSS 来实现:

JSFiddle

#insert{
   float:left;
   width:99%;
   padding:7px;
   background:#093;
   text-align:center;
   margin-bottom:10px;
   cursor:pointer;
}

.box{
    position:relative;
    width:250px;
    height:150px;
    background:#09F;
    float:left;
    margin-right:10px;
    margin-bottom:10px;
}

/*Added this code*/
.box:hover .inside-box{
    height:70px;
}

.inside-box{
   transition:.3s;              /*Added this line*/
   -webkit-transition:.3s;      /*Added this line*/
   -moz-transition:.3s;         /*Added this line*/
   position:absolute;
   width:100%;
   height:10px;
   background:#000;
   bottom:0;
}

这样做的好处是编写的代码更少、更容易理解并且性能更好。

缺点是只在IE10 and above有效.所有其他浏览器都可以正常工作(chrome、opera、safari 等)。