hover vorhandenen Text ausblenden und neuen Text einblenden ?

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

Der hier verwendete 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!