basti1012.bplaced.net

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>