单击手机时，悬停文本不会显示

Question

我对此很陌生，只能使用html和css，而且有一个大问题。

我的网页上有一个悬停，如果我在浏览器中检查，悬停应该在移动设备上点击时显示。悬停在桌面上运行良好

但是当网页现在处于活动状态时，在我的iphone上点击鼠标时不会显示悬停。我可以看到文本在某个地方，因为我可以标记并复制它。但正如我所说，它并没有显示出来。有人能帮帮我吗？悬停的网页：http://breaback.se/tjanster.html

下方的代码

.container {   
display: flex;
justify-content: space-around;
margin: 0;
padding: 0;
flex-wrap: wrap;
width: 100%;
height: 30rem;
}
.tjanst-rubrik {
text-align: center;
font-family: "Montserrat";
color: white;
font-size: 1.5em;
margin: 0.3em;
padding: 0.3em;
background-color: black;
opacity: 0.9;
}
.hoverbox {
display: inline-block;
position: relative;
max-width: 100%;
height: auto;
}
.hoverbox .hoverbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hoverbox .hoverbox-layer_top:hover {
opacity: 1;
}
.hoverbox .tjanst-text {
font-family: "Montserrat";
color: white;
text-align: center;
font-size: 0.7em;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tjanst-bild {
background-size: cover;
width: 18em;
height: 30em;
margin: 0.5rem;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3); 
}

<div class="container">
<div class="hoverbox tjanst-bild" style="background-image: url(bilder/grava.jpg);">
<p class="tjanst-rubrik">RÅDGIVNING</p>
<div class="hoverbox-layer_top">
<div class="tjanst-text">
Har ni funderingar kring material, växtval, växtsjukdomar eller andra odlingstekniska åtgärder? Vi träffas hemma hos er och använder tiden enligt era önskemål. Ca 2h hemma hos dig. Ni för anteckningar.<br>
<br>
Pris: <b>2500 kr</b> inkl. moms
<p></p>
</div>
</div>
</div>

Answer 1

手机中没有鼠标来识别悬停。您需要使用JavaScript和"onclick"事件将此功能分配给这个div