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