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 :) el 3 jun. a las 10:36
  • @Jose si la respuesta te fue de ayuda, marcala como aceptada. Un saludo.
    – jachguate
    el 6 jun. 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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.