Tengo el siguiente código:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .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;
    }*/

<!-- language: lang-html -->

     <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>

<!-- end snippet -->

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-.