Html 我的悬停不'；单击移动设备时不显示

因此，我试图建立一个只有html和css的响应网站。到现在为止，一直都还不错。但是，我的鼠标悬停效果不会在我的手机上显示。当我在桌面上查看页面时，它会在单击时显示，但不会在网站在线时显示

奇怪的是，我可以复制我想在单击时显示的文本，但正如我所说的，它不会显示。所以我的想法是，文本在某个地方，但它没有显示出来。有人能帮我吗？我对这个很陌生

下面是我的html和css

  box-sizing: border-box;
 }
 .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:hover .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); 
 }

---

.hoverbox.hoverbox-layer\u-top:hover

或

.hoverbox:hover.hoverbox-layer\u-top

应足以满足

悬停

规则（即不是两个悬停）。

.hoverbox.hoverbox-layer\u-top:hover

或

。hoverbox:hover.hoverbox.hoverbox.hoverbox.layer\u-top应足以满足
悬停
规则（即不是两次悬停。）
在移动设备上，单击事件之前会触发
：hover
事件，这可能会导致触摸屏设备上的
：hover
功能出现问题。触摸屏设备上的此类事件更像是双击而不是实际的单击

您最好在JavaScript中使用
onClick（）
事件。
在移动设备上，单击事件之前会触发
：hover
事件，这可能会导致触摸屏设备上的
：hover
功能出现问题。触摸屏设备上的此类事件更像是双击而不是实际的单击

您最好在JavaScript中使用
onClick（）
事件。
不是将鼠标悬停在物体上以激活悬停。我认为您需要使用：focus for mobile devices示例

输入：焦点括号
背景颜色：黄色；
括号

对于名称和数字文本安装
对于带有光标的对象，不使用鼠标悬停来激活鼠标悬停。我认为您需要使用：focus for mobile devices示例

输入：焦点括号
背景颜色：黄色；
括号

对于名称和数字文本安装
谢谢！但我不能使用Javascriptunfortunately@SebastianLinderoth我可以问为什么不吗？谢谢！但是我不能使用Javascriptunfortunately@SebastianLinderoth我可以问一下为什么不可以吗？我试过了，但不起作用：（这里是网站直播，如果有帮助的话）：我试过了，但不起作用：（如果有帮助的话，这里是网站直播：对不起，我不明白如何应用这一点，因为它只能在移动设备上运行。@SebastianLinderoth您可以在CSS中使用
@media
规则指定
：悬停
事件用于大屏幕（桌面），使用
：焦点
事件用于其他所有内容（小屏幕，通常是移动设备）。抱歉，我不明白如何应用这一点，因为它只适用于移动设备。@SebastianLinderoth您可以在CSS中使用
@media
规则来指定
：悬停
事件用于大屏幕（桌面），并使用
：焦点
事件用于其他所有内容（小屏幕，通常是移动设备）。嗨，塞巴斯蒂安，请关闭此问题，因为你还有另一个问题出于同样的原因。嗨，塞巴斯蒂安，请关闭此问题，因为你还有另一个问题出于同样的原因。
<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.
                Pris: <b>2500 kr</b> inkl. moms
                <p></p>
            </div>
        </div>
    </div>