basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Hallo , Ich bin neu im Thema HTML / CSS ... und gerade bastele ich an einem vernünftigen Stundenplan. Die Frage nun ist ob ich, wenn ich mit der Maus über ein Fach gehe das Fach ausblenden kann und dafür eine Info oder so das lass ich mir noch einfallen einblenden? Danke für jede Hilfe, Jason

    Code

                                        
                                    <style>
      h1{
      margin:0;
      padding:0;
      text-align:center;
    }
    th{
      background:lightgrey;
    }
    table{
      width:100%;
    }
    td{
      width:calc(100% / 6)
    }
    #css tr td .fach ~ span{
      display:none;
    }
    #css tr td span{
      display:block;
      padding:10px;
      height:30px;
    }
    #css tr td:hover > .fach{
      display:none;
    }
    #css tr td:hover > .fach ~ span{
      display:block;
    background:lightgreen;
    }
    .hover{
     background:lightgreen; 
    }
    </style>
    <h1>Mit Css</h1>
    <table id="css">
      <tr>
        <th>Uhrzeit</th>
        <th>Montag</th>
        <th>Dienstag</th>
        <th>Mittwoch</th>
        <th>Donnerstag</th>
        <th>Freitag</th>
      </tr>
      <tr>
        <td>07:50-08:35</td>
        <td><span class="fach">Mathe</span><span>Neuer Text</span></td>
        <td><span class="fach">Deutsch</span><span>Neuer Text</span></td>
        <td><span class="fach">Reli</span><span>Neuer Text</span></td>
        <td><span class="fach">Kunst</span><span>Neuer Text</span></td>
        <td><span class="fach">Sport</span><span>Neuer Text</span></td>
      </tr>
      <tr>
        <td>08:38-09:20</td>
        <td><span class="fach">Kochen</span><span>Neuer Text</span></td>
        <td><span class="fach">Englisch</span><span>Neuer Text</span></td>
        <td><span class="fach">Sport</span><span>Neuer Text</span></td>
        <td><span class="fach">Lesen</span><span>Neuer Text</span></td>
        <td><span class="fach">Mathe</span><span>Neuer Text</span></td>
      </tr>
    </table>
    <h1>Mit Javascript</h1>
    <table id="js">
      <tr>
        <th>Uhrzeit</th>
        <th>Montag</th>
        <th>Dienstag</th>
        <th>Mittwoch</th>
        <th>Donnerstag</th>
        <th>Freitag</th>
      </tr>
      <tr>
        <td>07:50-08:35</td>
        <td data-text="neuer Text" class="fach">Mathe</td>
        <td data-text="neuer Text" class="fach">Deutsch</td>
        <td data-text="neuer Text" class="fach">Reli</td>
        <td data-text="neuer Text" class="fach">Kunst</td>
        <td data-text="neuer Text" class="fach">Sport</td>
      </tr>
      <tr>
        <td>08:38-09:20</td>
        <td data-text="neuer Text" class="fach">Kochen</td>
        <td data-text="neuer Text" class="fach">Englisch</td>
        <td data-text="neuer Text" class="fach">Sport</td>
        <td data-text="neuer Text" class="fach">Lesen</td>
        <td data-text="neuer Text" class="fach">Neuer</td>
      </tr>
    </table>
    <script>
    tdhov=document.querySelectorAll('td.fach');
    tdhov.forEach((f)=>{
        f.addEventListener('mouseenter',function(){
          text=f.getAttribute('data-text');
          var save=f.innerHTML;
          f.innerHTML=text;
          f.setAttribute('class','hover');
          f.addEventListener('mouseleave',function(){
              f.innerHTML=save;
          f.setAttribute('class','fach');        
          })
        })
    })
    </script>