2

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.

3
  • No entiendo el enunciado ni lo que es que está pasando que no debería pasar Commented el 23 may. 2022 a las 12:54
  • Estoy extrayendo una lista de programas (titulo y descripción) de un canal de tv. la descripción esta oculta y quiero que se muestre cuando paso el cursor encima del titulo. 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.
    – Myky
    Commented el 23 may. 2022 a las 13:04
  • @Myky, comentario, creo que sería una mejor idea usar 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.
    – Marcos
    Commented el 23 may. 2022 a las 13:18

2 respuestas 2

3

Para tener el comportamiento que deseas no es necesario utilizar JavaScript sino que se puede solucionar de forma más sencilla con CSS tal que:

<head>
  <style>
    .progratitu2 {
       cursor: pointer;
     }
    .progradesc2 {
       display: none;
     }

    .progratitu2:hover + .progradesc2 {
       display: block;
     } 
  </style>
</head>

De esta manera al pasar el raton por encima de todos los elementos titulo con clase progratitu2 se mostrará el elemento siguiente con clase progradesc2 esto mediante el uso de la pseudo-clase de CSS :hover

1
  • Muchas gracias David, es exactamente lo que buscaba. Muchas gracias por las respuestas. Un saludo
    – Myky
    Commented el 23 may. 2022 a las 13:19
2

Crear muchos elementos con el mismo 'id' es un error ya que al buscarlos sólo vas a encontrar el primero.

Solución:

Podrías crear un contenedor para el título y la descripción, y cuando el mouse pase sobre el título (elemento visible), al contenedor le agregas la clase activo y así mostrar la descripción.

Ejemplo:

const programas = document.querySelectorAll('.progracont');
programas.forEach(e => {
  e.addEventListener('mouseover', () => {
    e.classList.add('activo');
  });

  e.addEventListener('mouseout', () => {
    e.classList.remove('activo');
  });
});
.progratitu2 {
  cursor: pointer;
}

.progracont .progradesc2 {
  display: none;
}

.progracont.activo .progradesc2 {
  display: block;
}
<div class="progracont">
  <div class="progratitu2">3satTextVision</div>
  <div class="progradesc2">Das Informationsangebot wird nachts zur programmfreien Sendezeit ausgestrahlt. Aktuelle Nachrichten sowie Wetter- und Sport-News werden dabei ebenso integriert wie das Sender-Programm des nächsten Tages.</div>
  <br>
</div>
<div class="progracont">
  <div class="progratitu2">Erlebnisreisen</div>
  <div class="progradesc2">Immer häufiger wird Instagram auch als Reiseführer genutzt. Aber können die schönen Bilder der Realität standhalten? Beim Check mit "#lookslike" in Tallinn, der Hauptstadt von Estland, hat Christian Loß die Hotspots und Geheimtipps der Stadt recherchiert
    und macht sich vor Ort ein Bild.</div>
  <br>
</div>


Actualización:

Haciendo clic, podría quedar así:

document.querySelectorAll('.progracont').forEach(e => {
  e.addEventListener('click', () => e.classList.toggle('activo'));
});
.progratitu2 {
  cursor: pointer;
}

.progracont .progradesc2 {
  display: none;
}

.progracont.activo .progradesc2 {
  display: block;
}
<div class="progracont">
  <div class="progratitu2">3satTextVision</div>
  <div class="progradesc2">Das Informationsangebot wird nachts zur programmfreien Sendezeit ausgestrahlt. Aktuelle Nachrichten sowie Wetter- und Sport-News werden dabei ebenso integriert wie das Sender-Programm des nächsten Tages.</div>
  <br>
</div>
<div class="progracont">
  <div class="progratitu2">Erlebnisreisen</div>
  <div class="progradesc2">Immer häufiger wird Instagram auch als Reiseführer genutzt. Aber können die schönen Bilder der Realität standhalten? Beim Check mit "#lookslike" in Tallinn, der Hauptstadt von Estland, hat Christian Loß die Hotspots und Geheimtipps der Stadt recherchiert
    und macht sich vor Ort ein Bild.</div>
  <br>
</div>

10
  • Muchas gracias Marcos, tu código funciona muy bien. Mi idea inicial, era la de reducir los click al máximo en ordenadores, a ver que tal funciona. Un saludo
    – Myky
    Commented el 23 may. 2022 a las 13:59
  • Entiendo, mi comentario se basa principalmente en los saltos que genera mostrar y ocultar por solo mover el mouse. Imagina el caso en el que la descripción del programas es muy larga, moves el mouse hacia abajo y el salto que ocurre hacia arriba es muy grande, por lo que tenes que volver a ajustar la posición del puntero. Si la descripción estuviera "flotando" quizás no sería tan "molesto"
    – Marcos
    Commented el 23 may. 2022 a las 14:03
  • Tienes toda la razón, hacerlo flotante va ser la mejor solución. Muchas gracias
    – Myky
    Commented el 23 may. 2022 a las 14:38
  • No veo la necesidad de complicarlo con JavaScript existiendo un conjunto en CSS que hace lo mismo Commented el 23 may. 2022 a las 17:20
  • Hola Marcos, como puedo poner click para cerrar las descripciones? No consigo hacerlo.
    – Myky
    Commented el 26 may. 2022 a las 15:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.