Quiero que los elementos aparezcan en dispositivos móviles, pero no en el escritorio, ya que el elemento se controla con: Hover. En los dispositivos móviles, obviamente, no puedes *: Hover, así que necesito que aparezcan. El problema es que incluso en los anchos más pequeños, si uno encoge su pantalla de escritorio hasta los anchos más pequeños, los elementos se muestran. No puedo solucionar todos los dispositivos en las consultas de los medios para que mis elementos solo aparezcan en dispositivos móviles.

* Editar: Cambiado puede no poder

 main class="animate__animated animate__slideInDown" id="cards">
<a href="signup.html">
    <section class="cards__med">
        <div class="cards__flexchild">
            <h1 class="cards__med-title">Medellín</h1>
            <img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
            <h2 class="cards__texthead" id="texthead_media640">The City of Eternal Spring</h2>
            <h2 class="choice" id="choice-media640">I choose Medellín!</h2>
        </div>
    </section>
</a>

    <a href="signup.html"><section class="cards__bog">
        <div>
            <h1 class="cards__bog-title">Bogotá</h1>
            <img class="cards__bogimage" src="img/bogota.jpg" alt="bogota">
            <h1 class="cards__texthead">The City where the Past and Present Meet</h1>
            
            <!-- <a href="signup.html" class="cards__bog-btn">Choose City</a> -->
        </div>
        <h2 class="choice">I choose Bogotá!</h2>
    
    </section></a>
    
    <a href="signup.html"><section class="cards__san">
        <div>
            <h1 class="cards__san-title">Santa Marta</h1>
            <img class="cards__santaimage" src="img/santa.jpg" alt="santa">
            <h1 class="cards__texthead" id="texthead__media1024">The Destination with Everything</h1>
            
            <!-- <a href="signup.html" class="cards__san-btn">Choose City</a> -->
        </div>
            <h2 class="choice" id="choice_santa">I choose Santa Marta!</h2>
    </section></a>
</main>



 #cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 3rem;
    /* animation: slide 1s; */
    /* transform: translateY(10rem); */
    
}

.cards__texthead {
    width: 100%;
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background: white;
    color:  var(--main-color);
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
}

.cards__med {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-preferred-size: 30rem;
        flex-basis: 30rem;
    -webkit-box-flex: .1;
        -ms-flex-positive: .1;
            flex-grow: .1;
    border: 4px solid black;
    background:  rgba(255, 236, 0, 0.65);
    height: 35rem;
    width: 30rem;
    animation: med_slide 1.25s;
}
.cards__med:hover {
    background:  rgba(255, 236, 0, 0.8);
}

.cards__med-title {
    width: 100%;
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    background: white;
    color: var(--main-color);
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
}
.cards__medimage {
    width: 412px;
    height: 220px;
    margin-bottom: 2rem;
}

.cards__med:not(:hover) .choice {
    display: none;
}

.choice {
    color: white;
    background: var(--main-color);
    font-size: 2.25rem;
    margin-top: 4.25rem;
    width: 75%;
    border: 1px solid white;
    margin-left: 3.75rem;
}
.cards__med-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 1rem;
    background:  var(--main-color);
    color:white;
    font-family: 'Roboto', sans-serif;
    width: 70%;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    margin-top: 12%;
    margin-left: 14%;
    
}
.cards__bog {
    border: 4px solid black;
    background: rgba(0, 17, 223, 0.65);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: .1;
        -ms-flex-positive: .1;
            flex-grow: .1;
    -ms-flex-preferred-size: 30rem;
        flex-basis: 30rem;
        height: 35rem;
    width: 30rem;
    animation: bog_slide 1.5s;
}
.cards__bog:hover {
    background: rgba(0, 17, 223, 0.8);
}

.cards__bog-title {
    width: 100%;
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    background: white;
    color: var(--main-color);
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
}
.cards__bog-btn  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 1rem;
    background:  var(--main-color);
    color:white;
    font-family: 'Roboto', sans-serif;
    width: 70%;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    margin-top: 12%;
    margin-left: 14%;
}

.cards__bogimage {
    width: 412px;
    height: 220px;
    margin-bottom: 2rem;
}

.cards__bog:not(:hover) .choice {
    display: none;
}

.cards__san {
    border: 4px solid black;
    background: rgba(255, 0, 8, 0.65);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: .1;
        -ms-flex-positive: .1;
            flex-grow: .1;
    -ms-flex-preferred-size: 30rem;
        flex-basis: 30rem;
        height: 35rem;
    width: 30rem;
    animation: san_slide 2s;
}
.cards__san:hover {
    background: rgba(255, 0, 8, 0.8);
}
.cards__san-title {
    width: 100%;
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    background: white;
    color:  var(--main-color);
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
}

.cards__santaimage {
    width: 412px;
    height: 220px;
    margin-bottom: 2rem;
}

.cards__san:not(:hover) .choice {
    display: none;
}

a {
    text-decoration: none;
    color: black;
}

@keyframes med_slide {
    from {
        transform: translateY(-100rem);
    }

    to {
        transform: translateY(1.55rem);
    }
}

@keyframes bog_slide {
    from {
        transform: translateY(-80rem);
    }

    to {
        transform: translateY(1.5rem);
    }
}

@keyframes san_slide {
    from {
        transform: translateY(-60rem);
    }

    to {
        transform: translateY(1.5rem);
    }
}

    @media (hover: none) {
    .cards__san:hover .choice,
    .cards__med:hover .choice,
    .cards__bog:hover .choice  {
      display: inherit;
    }
  }

@media only screen 
and (min-width: 1366px)
and (max-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }
}


@media screen and (max-width: 1450px) {
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 330px;
        height: 220px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 32rem;
        width: 27rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        margin-left: .5rem;
    }

    #choice_santa {
        margin-top: 4.5rem;
        font-size: 2rem;
    }
}


@media screen and (max-width: 1300px) {
    body {
        background-attachment: scroll;
    }
    header {
        text-align: center;
    }
    
    .title {
        margin: 0;
        margin-top: 2rem;
        border: 2px black solid;
        display: inline-block;
        text-align: center;
    }

    #cards {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
     
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 310px;
        height: 200px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 32rem;
        width: 21.5rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        /*👉margin-left: .5rem;👈*/
    }

    .choice {
        margin-top: 0;
        margin-left: 2.75rem;
    }
    #choice-media640 {
        margin-top: 2.8rem ;
    }
    #choice_santa {
        margin-top: 3.5rem;
    }
}



@media screen and (max-width: 1199px) {
    body {
        background-attachment: scroll;
    }
    header {
        text-align: center;
    }
    
    .title {
        margin: 0;
        margin-top: 2rem;
        border: 2px black solid;
        display: inline-block;
        text-align: center;
    }

    #cards {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 290px;
        height: 180px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 32rem;
        width: 19rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        /*👉margin-left: .5rem;👈*/
    }

    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }

    .choice {
        margin-top: 0;
        margin-left: 2.75rem;
    }
    #choice-media640 {
        margin-top: 2.8rem ;
    }
    #choice_santa {
        margin-top: 1rem;
    }
}


 @media screen and (max-width: 1023px) {
    body {
        background-attachment: scroll;
    }
    header {
        text-align: center;
    }
    
    .title {
        margin: 0;
        margin-top: 2rem;
        border: 2px black solid;
        display: inline-block;
        text-align: center;
    }

    #cards {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 310px;
        height: 200px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 32rem;
        width: 21.5rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        /*👉margin-left: .5rem;👈*/
    }

    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }

    .choice {
        margin-top: 0;
        margin-left: 2.75rem;
    }
 }
 @media screen and (max-width: 400px) {
    body {
        background-attachment: scroll;
    }
   
    .title {
        margin-top: 2rem;
        /*👉width: 21.5rem;👈*/
        border: 2px black solid;
        display: inline-block;
    }

    #cards {
        display: flex;
        flex-direction: column;
    }
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 230px;
        height: 120px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 29rem;
        width: 17rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        margin-left: 0rem;
    }

    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }

    .choice {
        margin-top: 0;
        margin-left: 2rem;
        font-size: 1.75rem;
    }
 }
 @media screen and (max-width: 300px) {
    body {
        background-attachment: scroll;
    }
   
    .title {
        margin-top: 2rem;
        /*👉width: 21.5rem;👈*/
        border: 2px black solid;
        display: inline-block;
    }

    #cards {
        display: flex;
        flex-direction: column;
    }
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 230px;
        height: 120px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 29rem;
        width: 17rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        margin-left: 0rem;
    }

    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }

    .choice {
        margin-top: 0;
        margin-left: 2rem;
        font-size: 1.75rem;
    }
 }
-1
NamelessDude21 26 may. 2021 a las 22:56

1 respuesta

La mejor respuesta

Mientras que usted dice que no puede probar para cada dispositivo (y es una cosa insegura que hacer de todos modos) puede probar, como mdn lo pone, para ver si

El mecanismo de entrada primario puede flotar convenientemente sobre los elementos.

No estoy seguro de cómo 'convenientemente' se define aquí, pero MDN considera que tiene que hacer un toque largo como no en esa categoría.

Aquí está su ejemplo como un fragmento:

@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}
<a href="#">Try hovering over me!</a>

Además: para detener los elementos de elección que se muestran cuando el usuario está en un dispositivo que tiene un flujo convenientemente utilizable (según la comprensión del navegador de "conveniente"), debemos detener la visualización de la opción. Cualquiera que sea el ancho de la pantalla.

 @media (hover: hover) {
    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
     display: none;
   }
 }

Esto dice: Cuando el usuario puede flotar, no muestre el elemento de elección. Necesitamos poner esto después de todas las otras configuraciones de medios para que sobrescriba cualquier cosa que puedan establecer para la visualización de elección. En este fragmento, por lo tanto, está justo al final:

#cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 3rem;
    /* animation: slide 1s; */
    /* transform: translateY(10rem); */
    
}

.cards__texthead {
    width: 100%;
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background: white;
    color:  var(--main-color);
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
}

.cards__med {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-preferred-size: 30rem;
        flex-basis: 30rem;
    -webkit-box-flex: .1;
        -ms-flex-positive: .1;
            flex-grow: .1;
    border: 4px solid black;
    background:  rgba(255, 236, 0, 0.65);
    height: 35rem;
    width: 30rem;
    animation: med_slide 1.25s;
}
.cards__med:hover {
    background:  rgba(255, 236, 0, 0.8);
}

.cards__med-title {
    width: 100%;
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    background: white;
    color: var(--main-color);
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
}
.cards__medimage {
    width: 412px;
    height: 220px;
    margin-bottom: 2rem;
}

.cards__med:not(:hover) .choice {
    display: none;
}

.choice {
    color: white;
    background: var(--main-color);
    font-size: 2.25rem;
    margin-top: 4.25rem;
    width: 75%;
    border: 1px solid white;
    margin-left: 3.75rem;
}
.cards__med-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 1rem;
    background:  var(--main-color);
    color:white;
    font-family: 'Roboto', sans-serif;
    width: 70%;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    margin-top: 12%;
    margin-left: 14%;
    
}
.cards__bog {
    border: 4px solid black;
    background: rgba(0, 17, 223, 0.65);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: .1;
        -ms-flex-positive: .1;
            flex-grow: .1;
    -ms-flex-preferred-size: 30rem;
        flex-basis: 30rem;
        height: 35rem;
    width: 30rem;
    animation: bog_slide 1.5s;
}
.cards__bog:hover {
    background: rgba(0, 17, 223, 0.8);
}

.cards__bog-title {
    width: 100%;
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    background: white;
    color: var(--main-color);
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
}
.cards__bog-btn  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 1rem;
    background:  var(--main-color);
    color:white;
    font-family: 'Roboto', sans-serif;
    width: 70%;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    margin-top: 12%;
    margin-left: 14%;
}

.cards__bogimage {
    width: 412px;
    height: 220px;
    margin-bottom: 2rem;
}

.cards__bog:not(:hover) .choice {
    display: none;
}

.cards__san {
    border: 4px solid black;
    background: rgba(255, 0, 8, 0.65);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: .1;
        -ms-flex-positive: .1;
            flex-grow: .1;
    -ms-flex-preferred-size: 30rem;
        flex-basis: 30rem;
        height: 35rem;
    width: 30rem;
    animation: san_slide 2s;
}
.cards__san:hover {
    background: rgba(255, 0, 8, 0.8);
}
.cards__san-title {
    width: 100%;
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    background: white;
    color:  var(--main-color);
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
}

.cards__santaimage {
    width: 412px;
    height: 220px;
    margin-bottom: 2rem;
}

.cards__san:not(:hover) .choice {
    display: none;
}

a {
    text-decoration: none;
    color: black;
}

@keyframes med_slide {
    from {
        transform: translateY(-100rem);
    }

    to {
        transform: translateY(1.55rem);
    }
}

@keyframes bog_slide {
    from {
        transform: translateY(-80rem);
    }

    to {
        transform: translateY(1.5rem);
    }
}

@keyframes san_slide {
    from {
        transform: translateY(-60rem);
    }

    to {
        transform: translateY(1.5rem);
    }
}

    @media (hover: none) {
    .cards__san:hover .choice,
    .cards__med:hover .choice,
    .cards__bog:hover .choice  {
      display: inherit;
    }
  }

@media only screen 
and (min-width: 1366px)
and (max-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }
}


@media screen and (max-width: 1450px) {
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 330px;
        height: 220px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 32rem;
        width: 27rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        margin-left: .5rem;
    }

    #choice_santa {
        margin-top: 4.5rem;
        font-size: 2rem;
    }
}


@media screen and (max-width: 1300px) {
    body {
        background-attachment: scroll;
    }
    header {
        text-align: center;
    }
    
    .title {
        margin: 0;
        margin-top: 2rem;
        border: 2px black solid;
        display: inline-block;
        text-align: center;
    }

    #cards {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
     
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 310px;
        height: 200px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 32rem;
        width: 21.5rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        /*👉margin-left: .5rem;👈*/
    }

    .choice {
        margin-top: 0;
        margin-left: 2.75rem;
    }
    #choice-media640 {
        margin-top: 2.8rem ;
    }
    #choice_santa {
        margin-top: 3.5rem;
    }
}



@media screen and (max-width: 1199px) {
    body {
        background-attachment: scroll;
    }
    header {
        text-align: center;
    }
    
    .title {
        margin: 0;
        margin-top: 2rem;
        border: 2px black solid;
        display: inline-block;
        text-align: center;
    }

    #cards {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 290px;
        height: 180px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 32rem;
        width: 19rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        /*👉margin-left: .5rem;👈*/
    }

    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }

    .choice {
        margin-top: 0;
        margin-left: 2.75rem;
    }
    #choice-media640 {
        margin-top: 2.8rem ;
    }
    #choice_santa {
        margin-top: 1rem;
    }
}


 @media screen and (max-width: 1023px) {
    body {
        background-attachment: scroll;
    }
    header {
        text-align: center;
    }
    
    .title {
        margin: 0;
        margin-top: 2rem;
        border: 2px black solid;
        display: inline-block;
        text-align: center;
    }

    #cards {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 310px;
        height: 200px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 32rem;
        width: 21.5rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        /*👉margin-left: .5rem;👈*/
    }

    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }

    .choice {
        margin-top: 0;
        margin-left: 2.75rem;
    }
 }
 @media screen and (max-width: 400px) {
    body {
        background-attachment: scroll;
    }
   
    .title {
        margin-top: 2rem;
        /*👉width: 21.5rem;👈*/
        border: 2px black solid;
        display: inline-block;
    }

    #cards {
        display: flex;
        flex-direction: column;
    }
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 230px;
        height: 120px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 29rem;
        width: 17rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        margin-left: 0rem;
    }

    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }

    .choice {
        margin-top: 0;
        margin-left: 2rem;
        font-size: 1.75rem;
    }
 }
 @media screen and (max-width: 300px) {
    body {
        background-attachment: scroll;
    }
   
    .title {
        margin-top: 2rem;
        /*👉width: 21.5rem;👈*/
        border: 2px black solid;
        display: inline-block;
    }

    #cards {
        display: flex;
        flex-direction: column;
    }
    .cards__medimage,
    .cards__bogimage,
    .cards__santaimage {
        width: 230px;
        height: 120px;
    }

    .cards__med,
    .cards__bog,
    .cards__san {
        height: 29rem;
        width: 17rem;
        margin-bottom: 4rem;
        border: 3px black solid;
        margin-left: 0rem;
    }

    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
        display: inherit;
    }

    .choice {
        margin-top: 0;
        margin-left: 2rem;
        font-size: 1.75rem;
    }
 }
 @media (hover: hover) {
    .cards__med:not(:hover) .choice,
    .cards__bog:not(:hover) .choice,
    .cards__san:not(:hover) .choice {
     display: none;
   }
 }
  <main class="animate__animated animate__slideInDown" id="cards">
<a href="signup.html">
    <section class="cards__med">
        <div class="cards__flexchild">
            <h1 class="cards__med-title">Medellín</h1>
            <img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
            <h2 class="cards__texthead" id="texthead_media640">The City of Eternal Spring</h2>
            <h2 class="choice" id="choice-media640">I choose Medellín!</h2>
        </div>
    </section>
</a>

    <a href="signup.html"><section class="cards__bog">
        <div>
            <h1 class="cards__bog-title">Bogotá</h1>
            <img class="cards__bogimage" src="img/bogota.jpg" alt="bogota">
            <h1 class="cards__texthead">The City where the Past and Present Meet</h1>
            
            <!-- <a href="signup.html" class="cards__bog-btn">Choose City</a> -->
        </div>
        <h2 class="choice">I choose Bogotá!</h2>
    
    </section></a>
    
    <a href="signup.html"><section class="cards__san">
        <div>
            <h1 class="cards__san-title">Santa Marta</h1>
            <img class="cards__santaimage" src="img/santa.jpg" alt="santa">
            <h1 class="cards__texthead" id="texthead__media1024">The Destination with Everything</h1>
            
            <!-- <a href="signup.html" class="cards__san-btn">Choose City</a> -->
        </div>
            <h2 class="choice" id="choice_santa">I choose Santa Marta!</h2>
    </section></a>
</main>
1
A Haworth 27 may. 2021 a las 06:22