为PHP输出的游戏缩略图添加自定义tooltip，鼠标悬停无响应求助

问题描述 #

使用CSS自定义Tooltip样式，期望鼠标悬停PHP输出的游戏缩略图时显示对应游戏标题，但图片无法响应hover触发Tooltip。

原代码 #

CSS代码 #

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}
[data-title]:after {
  content: attr(data-title);
  background-color: #00FF00;
  color: #111;
  font-size: 150%;
  position: absolute;
  padding: 1px 5px 2px 5px;
  bottom: -1.6em;
  left: 100%;
  white-space: nowrap;
  box-shadow: 1px 1px 3px #222222;
  opacity: 0;
  border: 1px solid #111111;
  z-index: 99999;
  visibility: hidden;
}
[data-title] {
  position: relative;
}

PHP代码 #

echo '<div class="ran_box">';
echo '<a href="' . $siteurl . 'index.php?act=game&id=' . $games['id'] . '">';
echo '<img src="' . $thumbnail . '" width="60" height="60" data-title="'. $games['title'] . '"></a></div>';

问题原因 #

1. 替换元素不支持伪元素：<img>属于替换元素，浏览器会用外部资源替换其内容，无法渲染:after/:before伪元素，因此绑定在img上的data-title无法触发Tooltip。
2. 父元素事件覆盖：即使伪元素能生效，<a>标签作为img的父元素，可能会优先捕获hover事件，导致img的hover状态无法被正确识别。

解决方案 #

方案1：将data-title移至<a>标签 #

修改PHP代码，把data-title属性从img转移到包裹它的<a>标签上：

echo '<div class="ran_box">';
echo '<a href="' . $siteurl . 'index.php?act=game&id=' . $games['id'] . '" data-title="'. $games['title'] . '">';
echo '<img src="' . $thumbnail . '" width="60" height="60"></a></div>';

CSS无需修改，选择器[data-title]会匹配带该属性的<a>标签，hover时正常触发伪元素显示。

方案2：用<span>包裹img并绑定data-title #

给img添加一个<span>父容器，将data-title绑定到span上：

echo '<div class="ran_box">';
echo '<a href="' . $siteurl . 'index.php?act=game&id=' . $games['id'] . '">';
echo '<span data-title="'. $games['title'] . '"><img src="' . $thumbnail . '" width="60" height="60"></span></a></div>';

同时调整CSS，确保span为行内块级元素，保证伪元素定位正确：

[data-title] {
  position: relative;
  display: inline-block; /* 新增，确保伪元素能正确定位 */
}

原理说明 #

非替换元素（如<a>、<span>）支持伪元素渲染，将data-title绑定到这些元素上后，:after伪元素会被正确插入到元素内容区域，hover时即可触发样式变化。

内容的提问来源于stack exchange，提问作者mike36