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-.
hover
se revelen pero de forma individual."hover
se revelen pero de forma individual?