[英]css transitions not working while loop
在我的網站上,我有一個表格列表,這些表格為特定日期的運動員設置了很多訓練。
我想添加輸入他們如何做的功能。 我希望它以某種方式工作,以便當您將鼠標懸停或單擊培訓時,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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.