1

Tengo el siguiente código:

.song__info {
    width: 470px;
}

    .song__info-up {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: start;
    }

        .song__ranking {
            font-family:var(--number_font);
            font-size: 4.5rem;
            font-weight: bold;
            color: var(--mid_color);
            text-shadow: 5px 5px 4px var(--light_color);
            margin: 0px 25px 0px 25px;
        }

        .song__rym-data {
            margin-top: 2.5px;
            overflow: hidden;
        }
        .song__rym-data:hover {
            overflow: visible;
            z-index: 1;
        }

            .song__names {
                -border: 2px dashed black;
            }
                .song__title {
                    font-style: italic;
                }
                .song__artist {
                    font-weight: bold;
                }

            .song__location {
                margin-top: 2.5px;
            }
                .song__location-img {
                    transform: translateY(-1.5px);
                    margin-right: 2.5px;
                }
                /*.song__location-name {

                }*/

            .song__album {
                margin-top: 2.5px;
            }
                /*.song__album-type {

                }*/
                .song__album-title {
                    font-style: italic;
                }

            .song__genres {
                margin-top: 2.5px;
                font-size: 1.15rem;
            }
                .song__genre {
                    text-decoration: none;
                    cursor: pointer;
                }
                                
.dots {
    text-overflow: ellipsis;
    white-space: nowrap; 
    overflow: hidden;
}
/*.dots:hover {
    overflow: visible;
    z-index: 1;
}*/
 <div class="song__info">

      <div class="song__info-up">

          <div class="song__ranking">1</div>

          <div class="song__rym-data">

              <div class="song__names dots">
                  <a class="song__title ext-source-link">Luna park</a>
                  <span>de</span>
                  <a class="song__artist ext-source-link">…And You Will Know Us By The Trail of Dead</a>
              </div>

              <div class="song__location dots">
                  <img class="song__location-img" width="18px" height="18px" loading="lazy" src="img/misc/world_icon.png"/>
                  <span class="song__location-name">Austin (EEUU)</span>  
              </div>

              <div class="song__album dots">
                  <span>De su</span>
                  <span class="song__album-type">LP</span>
                  <span class="song__album-title">The century of self</span>
              </div>

              <div class="song__genres dots">
                  <a class="song__genre badge badge--blue" href="#">Alternative Rock</a>
                  <a class="song__genre badge badge--blue" href="#">Indie Rock</a>
                  <a class="song__genre badge badge--blue" href="#">Post-Hardcore</a>
                  <a class="song__genre badge badge--blue" href="#">Progressive Rock</a>
              </div>

          </div>

      </div>

La clase .dots trunca los elementos HTML cuando su ancho es excesivo. Mi objetivo es que al hacer hover se revelen pero de forma individual. Tal y como está ahora el código, al pasar por encima de .song__rym-data se revelan todos a la vez. Quiero que al pasar por encima de .song__names se revele .song__names pero no .song__genres y viceversa (o cualquier otro elemento con la clase .dots si su ancho es excesivo; no es el caso para este ejemplo).

Si cada elemento con .dots tuviera un max-width serviría, pero es difícil determinarlo puesto que depende del ancho que tenga .song__ranking, que varía con su contenido -el número puede ir de 1 a 15-.

8
  • ¿Cual es la pregunta?
    – Candid Moe
    Commented el 31 ago. a las 22:33
  • "Mi objetivo es que al hacer hover se revelen pero de forma individual." Commented el 31 ago. a las 22:51
  • Si, está claro que ese es tu objetivo. ¿Cual es la pregunta, dificultad o problema que te impide lograrlo.
    – Candid Moe
    Commented el 31 ago. a las 23:06
  • ¿Cómo puedo modificar el código para que al hacer hover se revelen pero de forma individual? Commented el 31 ago. a las 23:14
  • ¿A qué te refieres con "de forma individual"? ¿Primero el título y luego el enlace? ¿Con qué diferencia de tiempo? ¿algún efecto?
    – Alvaro Montoro
    Commented el 31 ago. a las 23:28

1 respuesta 1

1

Como yo lo veo, el principal problema es mostrar el contenido de cada "línea de información" y que esta acción no afecte el ancho de su contenedor.

Teniendo esto en cuenta, una solución puede ser la siguiente:

  • Modificamos el HTML para cada "línea de información" tenga un elemento con la clase .dots

  • Modificamos la regla .dots para que:

    • Esté en position: absolute: esto permite que al realizar hover, mostrar el contenido sin afectar el ancho de sus contenedores.
    • Tenga un width: 100%: esto permite que el overflow funcione.
  • Cada contenedor del elemento .dots debe tener:

    • position: relative: para que el width de .dots funcione.
    • Un height específico (pudiendo ser esto considerado "la desventaja" de esta solución): para evitar que se colapse.

Ejemplo:

.song__info {
  width: 470px;
}

# Para que los elementos tengan el alto indicado
.song__info * {
  box-sizing: border-box;
}

.song__info-up {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: start;
}

.song__ranking {
  font-family: var(--number_font);
  font-size: 4.5rem;
  font-weight: bold;
  color: var(--mid_color);
  text-shadow: 5px 5px 4px var(--light_color);
  margin: 0px 25px 0px 25px;
}

.song__rym-data {
  margin-top: 2.5px;
}

.song__names {
  height: 1.25rem;
}

.song__title {
  font-style: italic;
}

.song__artist {
  font-weight: bold;
}

.song__location {
  height: 1.5rem;
  margin-top: 2.5px;
}

.song__location-img {
  vertical-align: middle;
  margin-right: 2.5px;
}

.song__album {
  height: 1.25rem;
  margin-top: 2.5px;
}

.song__album-title {
  font-style: italic;
}

.song__genres {
  height: 1.25rem;
  font-size: 1.15rem;
  margin-top: 2.5px;
}

.song__genre {
  text-decoration: none;
  cursor: pointer;
}

.dots-cont {
  position: relative;
}

.dots {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.dots:hover {
  z-index: 1;
  overflow: visible;
  width: auto;
}
<div class="song__info">

  <div class="song__info-up">

    <div class="song__ranking">1</div>

    <div class="song__rym-data">

      <div class="song__names dots-cont">

        <div class="dots">
          <a class="song__title ext-source-link">Luna park</a>
          <span>de</span>
          <a class="song__artist ext-source-link">…And You Will Know Us By The Trail of Dead</a>
        </div>
      </div>

      <div class="song__location dots-cont">
        <div class="dots">
          <img class="song__location-img" width="18px" height="18px" loading="lazy" src="img/misc/world_icon.png" />
          <span class="song__location-name">Austin (EEUU)</span>
        </div>
      </div>

      <div class="song__album dots-cont">
        <div class="dots">
          <span>De su</span>
          <span class="song__album-type">LP</span>
          <span class="song__album-title">The century of self</span>
        </div>
      </div>


      <div class="song__genres dots-cont">
        <div class="dots">
          <a class="song__genre badge badge--blue" href="#">Alternative Rock</a>
          <a class="song__genre badge badge--blue" href="#">Indie Rock</a>
          <a class="song__genre badge badge--blue" href="#">Post-Hardcore</a>
          <a class="song__genre badge badge--blue" href="#">Progressive Rock</a>
        </div>
      </div>

    </div>

  </div>

1
  • No entiendo muy bien cómo funciona, pero funciona. He optado por fijar la altura a 1.5rem dentro de .dots-cont y se ve como espero. Commented el 1 sept. a las 15:46

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.