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
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>