3

Tengo este problema que cuando lo hago con CSS me deja pero con SASS no. Quiero que el título de la imagen esté desaparecido y cuando pase el mouse por encima, aparezca. En CSS tengo un contenedor de una imagen y un span, al igual que en SASS, pero no me lo muestra.

Paso el HTML CON CSS y SASS por último.

HTML

<div class="content-img">
      <div class="image">
        <img src="./ASSETS/IMG/2-0-batmoon.png" alt="vampires" />
        <span class="name">
          <span class="txt">Luna con Murcielagos </span>
        </span>
      </div>
      <div class="image">
        <img src="./ASSETS/IMG/2-1-dragon.png" alt="dragon" />
        <span class="name">
          <span class="txt">Dragon Chino</span>
        </span>
      </div>

CSS

.content-img .image .name {
  background-color: #202020;
  border-radius: 15px;
  color: #fff;
  display: none;
  min-width: 100px;
  width: 150px;
}

.content-img .image:hover .name {
  display: inline;
}
<div class="content-img">
      <div class="image">
        <img src="./ASSETS/IMG/2-0-batmoon.png" alt="vampires" />
        <span class="name">
          <span class="txt">Luna con Murcielagos </span>
        </span>
      </div>
      <div class="image">
        <img src="./ASSETS/IMG/2-1-dragon.png" alt="dragon" />
        <span class="name">
          <span class="txt">Dragon Chino</span>
        </span>
      </div>

SASS

.name {
      background-color: #202020;
      border-radius: 15px;
      color: #fff;
      display: none;
      min-width: 100px;
      width: 150px;

      &:hover .name {
        display: inline;
      }

Probe haciendolo y me sigue fallando, no se si sera un problema de especificidad o que

2 respuestas 2

3

En SASS, para obtener como resultado lo mismo que tenes en CSS, podrías hacerlo así:

.content-img .image { 

    .name {
      background-color: #202020;
      border-radius: 15px;
      color: #fff;
      display: none;
      min-width: 100px;
      width: 150px;
    }
    &:hover .name {
      display: inline;
    }
}
2
  • Sabes que no lo habia leido bien? Recien acabo de sacarlo yo, y me doy cuenta que ya me lo habias dicho, disculpa marcos la proxima leo mejor :) Commented el 3 jun. 2023 a las 10:36
  • @Jose si la respuesta te fue de ayuda, marcala como aceptada. Un saludo.
    – jachguate
    Commented el 6 jun. 2023 a las 9:59
1

Prueba anidando los selectores de la siguiente forma:

.content-img {
  .image {
    .name {
      background-color: #202020;
      border-radius: 15px;
      color: #fff;
      display: none;
      min-width: 100px;
      width: 150px;

      &:hover {
        display: inline;
      }
    }
  }
}
1
  • probé hacerlo y no me muestra ni el texto. Commented el 2 jun. 2023 a las 10:25

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.