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;  ?>