estoy intentando de hacer una guía de tv para web. Estoy extrayendo el titulo y la descripción de los programas de un canal de tv desde un enlace XML. Quiero que la descripción este oculta y que cuando paso el cursor encima del titulo se muestre. Este es el código que estoy utilizando:
<head>
<style>
.progratitu2 {
cursor: pointer;
}
.progradesc2 {
display: none;
}
.progradesc2.activo {
display: block;
}
</style>
</head>
<body>
<?php
$url = 'https://iptv-org.github.io/epg/guides/at/tvheute.at.epg.xml';
$xml=simplexml_load_file("$url");
foreach($xml->xpath('programme[@channel="ATV.at"]') as $item) {
echo '<div class="progratitu2" id="mosdesc">' .$item->title.'</div>';
echo '<div class="progradesc2" id="desc">'.$item->desc.'</div>';
echo "<br>";
}
?>
<script>
const mostrar = document.querySelector('#mosdesc');
const descripcion = document.querySelector('#desc');
mostrar.addEventListener('mouseenter', () => {
descripcion.classList.add('activo');
});
mostrar.addEventListener('mouseleave', () => {
descripcion.classList.remove('activo');
});
descripcion.addEventListener('mouseleave', () => descripcion.classList.remove('activo'));
</script>
el problema que tengo que solo me muestra la descripción del primer programa, el resto de programas solo se muestra el titulo pero al pasar el cursor no me muestra la descripción. No tengo experiencia y me esta costando hacerlo, estaría muy agradecido si alguien podría ayudarme, Gracias.
click
sobre los títulos para mostrar la descripción. Se me hace que así como está la experiencia del usuario (UX) no es muy amigable.