如何仅使用 :not(hover) 在移动设备和平板电脑上显示元素
How do I show elements on mobile devices and tablets only with :not(hover)
我希望元素显示在移动设备上而不是桌面上，因为元素是通过 :hover 控制的。在移动设备上显然你不能* :hover 所以我需要它们出现。问题是，即使在较小的宽度上，如果将桌面屏幕缩小到较小的宽度，元素也会显示出来。我无法在媒体查询中挑出所有设备，因此我的元素仅显示在移动设备上。
*编辑：将 can 更改为 can't
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;
}
}
虽然你说你不能测试每一个设备（无论如何这是一件不安全的事情）你可以测试，正如MDN所说的那样，看看是否
the primary input mechanism can conveniently hover over elements.
我不确定这里 'conveniently' 是如何定义的，但 MDN 认为必须进行长时间触摸不属于该类别。
这是他们的示例片段：
@media (hover: hover) {
a:hover {
background: yellow;
}
}
<a href="#">Try hovering over me!</a>
补充：
要在用户位于具有方便使用的悬停的设备上时停止显示选择元素（根据浏览器对 'convenient' 的理解），那么无论屏幕宽度如何，我们都需要停止显示选择。
@media (hover: hover) {
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: none;
}
}
这是说：当用户可以悬停时不显示选择元素。我们需要将它放在所有其他媒体设置之后，以便它覆盖他们可能为选择的显示设置的任何内容。因此，在这个片段中它就在最后：
#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>
我希望元素显示在移动设备上而不是桌面上，因为元素是通过 :hover 控制的。在移动设备上显然你不能* :hover 所以我需要它们出现。问题是，即使在较小的宽度上，如果将桌面屏幕缩小到较小的宽度，元素也会显示出来。我无法在媒体查询中挑出所有设备，因此我的元素仅显示在移动设备上。
*编辑：将 can 更改为 can't
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;
}
}
虽然你说你不能测试每一个设备（无论如何这是一件不安全的事情）你可以测试，正如MDN所说的那样，看看是否
the primary input mechanism can conveniently hover over elements.
我不确定这里 'conveniently' 是如何定义的，但 MDN 认为必须进行长时间触摸不属于该类别。
这是他们的示例片段：
@media (hover: hover) {
a:hover {
background: yellow;
}
}
<a href="#">Try hovering over me!</a>
补充： 要在用户位于具有方便使用的悬停的设备上时停止显示选择元素（根据浏览器对 'convenient' 的理解），那么无论屏幕宽度如何，我们都需要停止显示选择。
@media (hover: hover) {
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: none;
}
}
这是说：当用户可以悬停时不显示选择元素。我们需要将它放在所有其他媒体设置之后，以便它覆盖他们可能为选择的显示设置的任何内容。因此，在这个片段中它就在最后：
#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>