hover-vs-click-mit-gleichen-ids.php
Quell Code
<style>
.tooltip {
cursor: help;
}
.tooltip em {
display: none;
}
.tooltip:hover em {
z-index: 9999;
display: block;
white-space: wrap;
left: 0; top: 0;
margin: 20px 0 0;
color: black;
font-style: italic;
border: 1px dotted black;
padding: 5px;
background: #fff4d1;
}
</style>
<?php
$time_start1 = microtime(true);
function los1(){
for ( $i=1; $i < 2001; $i++ ) {
?>
<table border="1px solid black">
<tr>
<td> <?php echo $i; ?> </td>
<td> <span class="tooltip"> Inhalte anzeigen <em> <?php for ( $z=1; $z < 2001; $z++ ) { echo "Zahl "; } ?> </em></span> </td>
</tr>
</table>
<?php
if($i==2000){
return $time_end1 = microtime(true);
}
}
}
?>
<div style="overflow:auto;width:100%;height:200px;border:1px solid red">
<?php
$r=los1();
$time = $r - $time_start;
?>
</div><br><br>
<?php
echo "Zeit für hover ".$time; ?>
<style>
.showhide:after {
content: 'Inhalt anzeigen';
display: inline-block;
}
.showhide:checked:after {
content: 'Inhalt verbergen';
}
.showhide:checked ~ #content {
height: 100%
}
.content {
height: 0;
margin: auto;
overflow: hidden;
transition: height 500ms;
}
</style>
<?php
$time_start2 = microtime(true);
function los12(){
for ( $i1=1; $i1 < 2001; $i1++ ) {
?>
<table border="1px solid black">
<tr>
<td> <?php echo $i1; ?> </td>
<td> <input type="checkbox" class="showhide">
<div class="content">
<?php for ( $z=1; $z < 2001; $z++ ) { echo "Zahl "; } ?>
</div>
</td>
</tr>
<?php
if($i1=2000){
return $time_end2 = microtime(true);
}
}
} ?>
<?php
?>
<div style="overflow:auto;width:100%;height:200px;border:1px solid red">
<?php
$r2=los12();
$time2 = $r2 - $time_start2;
?>
</div><br><br>
<?php
echo "Zeit für klick ".$time2; ?>