php - css transitions not working while loop -
on site have list of tables set bunch of training athletes on specific dates.
i want add ability input how did. work in way when hover or click on training div scroll down showing achieved.
i have following code in while loop:
$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 div theory.<br/> see if it<br/> slide , down </div>';
the css
.diary { width: 100%; height: 10px; background: #fff; -webkit-transition: width 2s; /* safari 3.1 6.0 */ transition: height 2s; font-size:0px; } .diary:hover { height: 300px; font-size:12px; background:#ccc }
it seemed work fine when tried on single div when put in while loop hover works fine seems ignore initial .diary
state , jumps straight hover state no transition.
my question is possible multiple divs or there better way achieve need.
because set transition
height
.diary { width: 100%; height: 10px; background: #fff; -webkit-transition: height 2s,background 2s;; /* safari 3.1 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 div theory. <br/>to see if <br/>will slide , down </div>
Comments
Post a Comment