Html CSS：鼠标悬停不适用于iOS Safari和Chrome

我有一个圆形的div，它有一个圆形的图像，底部有一个标题，不透明度为0.5悬停时，不透明度应变为1。它在所有桌面浏览器和iOS版Firefox上都能正常工作，但在Safari和iOS版Chrome上都不能工作

小提琴：

HTML:

---

我找到了一个解决方法：如果您将

onclick=“

添加到div，悬停将起作用

您的html将是：

<link rel="stylesheet" href="hover.css" type="text/css"/>

<div class="video_wrap update">
  <div class="content">
    <div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div>
    <div class="title_wrap" onclick=""><div class="title">bang bang</div></div>
  </div>
</div>

砰砰

iOS浏览器需要一个默认可单击的元素。如果使用HTML5，可以将包装器

div

更改为

a-tag

：

并将其设置为块元素：

.title_wrap {
  ...
  display:block;
}

---

如果不使用HTML5，则必须将

更改为类似

的内联元素，以便在按住时代码有效。

。它和hover一样，在Firefox的iOS版中也可以使用。你说得对。我在Chrome和Safari中尝试悬停时遇到的问题是，我在按住div时选择了文本。我认为Safari将“选择文本”放在“应用悬停”之前。我找到了一个解决方法：如果将

onclick=“

添加到div中，悬停将起作用。见更新的答案。我有这样的风险，但我不明白为什么我有两个：悬停在两个不同的，第一个div.class1:hover->OK在Chrome和Safari手机上。但是最后一个div.class2:hover->不适用于Safari Mobile，它只适用于Chrome Mobile如果你在CSS中添加

cursor:pointer

，它也有同样的效果。

<link rel="stylesheet" href="hover.css" type="text/css"/>

<div class="video_wrap update">
  <div class="content">
    <div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div>
    <div class="title_wrap" onclick=""><div class="title">bang bang</div></div>
  </div>
</div>

.title_wrap {
  ...
  display:block;
}