在我的网站上,我有一个表格列表,这些表格为特定日期的运动员设置了一堆训练。
我想添加输入他们如何做的能力。我希望它以某种方式工作,以便当您将鼠标悬停或单击训练时,div 会向下滚动显示所取得的成就。
我目前在 while 循环中有以下代码:
$sessTable .= '<table border = "1px solid black" style="width:100%; border-collapse: collapse">
<tr>
<td colspan="2" style="background-color:#E8E8E8 ">' .$newDate. '' .$attendBtn. '</td>
</tr>
<tr>
<td><div style=" float:left" >' .$session. '</div>' .$editBtns. '</td>
</tr>
</table>
<div class="diary">
testing the div theory.<br/>
to see if it<br/>
will slide up and down
</div>';
CSS的
.diary {
width: 100%;
height: 10px;
background: #FFF;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
font-size:0px;
}
.diary:hover {
height: 300px;
font-size:12px;
background:#CCC
}
当我在单个div 上尝试它时,它似乎工作正常,但是当我将其放入 while 循环中时,悬停工作正常,但似乎忽略了初始.diary
状态,并且直接跳转到悬停状态,没有过渡。
我的问题是,这是否适用于多个div,或者是否有更好的方法来实现我需要的。
因为您只为height
设置了transition
.diary {
width: 100%;
height: 10px;
background: #FFF;
-webkit-transition: height 2s,background 2s;;
/* For Safari 3.1 to 6.0 */
transition: height 2s,background 2s;;
font-size: 0px;overflow:hidden
}
.diary:hover {
height: 300px;
font-size: 12px;
background: #CCC
}
<div class="diary">
testing the div theory.
<br/>to see if it
<br/>will slide up and down
</div>