data-content 的内容移动设备不显示

移动设备在触摸元素时默认会弹出一个选中框，所以 `data-content` 内容在移动设备上默认无法显示。

有两种解决方法：

1. 使用 CSS `::after` 伪元素替代 `data-content` 显示元素：

HTML 代码：

<div class="hover-div" data-title="我是标题">我是需要悬停的元素</div>

CSS 代码：

.hover-div {
  position: relative;
}
.hover-div::after {
  position: absolute;
  top: 100%;
  left: 0;
  content: attr(data-title);
  display: none;
}
.hover-div:hover::after {
  display: block;
}

1. 使用 JavaScript 通过 `touchstart` 和 `touchend` 事件控制 `data-content` 元素的显示与隐藏：

HTML 代码：

<div class="hover-div" data-title="我是标题" data-content="我是内容">我是需要悬停的元素</div>

JavaScript 代码：

var hoverDivs = document.querySelectorAll('.hover-div');
hoverDivs.forEach(function(hoverDiv) {
  var content = hoverDiv.getAttribute('data-content');
  hoverDiv.addEventListener('mouseenter', function() {
    hoverDiv.setAttribute('data-content', '');
    hoverDiv.setAttribute('title', content);
    setTimeout(function() {
      hoverDiv.setAttribute('data-content', content);
    }, 10);
  });
  hoverDiv.addEventListener('mouseleave', function() {
    hoverDiv.setAttribute('data-content', '');
    hoverDiv.setAttribute('title', '');
  });
  hoverDiv.addEventListener('touchstart', function() {
    hoverDiv.setAttribute('data-content', content);
  });
  hoverDiv.addEventListener('touchend', function(event) {
    hoverDiv.setAttribute('data-content', '');
    hoverDiv.setAttribute('title', '');
    event.preventDefault();
  });
});

上述代码中，我们首先使用 `document.querySelectorAll()` 方法获取所有需要悬停的元素，在 PC 端上监听 `mouseenter`、 `mouseleave` 事件，在移动端上监听 `touchstart`、`touchend` 事件，通过设置 `data-content` 和 `title` 属性控制元素的显示和隐藏。需要注意的是，为了避免在移动设备上出现选中框，我们需要把 `data-content`设置为空字符串，然后通过 `setTimeout()` 函数在稍等一段时间后再重新设置为需要显示的内容。此外，我们需要通过 `event.preventDefault()` 方法防止触发点击事件。