如何修复WordPress中iOS设备的双击悬停问题

方案一：保留悬停效果，解决iOS双击问题 #

iOS Safari对带:hover样式的链接会强制双击——第一次触发悬停状态，第二次才执行跳转，这是系统默认行为。可以通过媒体查询区分触摸/非触摸设备，只在支持鼠标悬停的设备（比如桌面端）上启用悬停效果，iOS触摸设备自动跳过，这样既能保留桌面端的悬停交互，又能让iOS上单点击直接跳转项目页面。

把以下代码添加到WordPress的「附加CSS」中：

/* 仅在支持鼠标悬停的设备上启用磁贴链接的悬停效果 */
@media (hover: hover) {
  .site-main .tile a:hover {
    /* 保留主题原有的悬停样式，比如Espied主题默认的透明度变化 */
    opacity: 0.8;
    /* 若主题有其他悬停属性（如背景色、边框），可在此补充 */
  }
}

注：如果.site-main .tile a不是你站点磁贴链接的准确选择器，可以用浏览器开发者工具（右键磁贴→检查）找到对应的CSS选择器替换。

方案二：移除悬停效果（快速解决） #

如果上述方案不生效，或者你愿意牺牲悬停效果换取iOS的单点击体验，可以直接移除磁贴链接的悬停样式：

全局移除（所有设备都取消悬停） #

/* 移除所有设备上磁贴链接的悬停效果 */
.site-main .tile a:hover {
  all: unset;
}

仅针对iOS等触摸设备移除 #

/* 仅在触摸设备上移除磁贴链接的悬停效果，保留桌面端悬停 */
@media (hover: none) {
  .site-main .tile a:hover {
    all: unset;
  }
}

操作步骤 #

1. 登录WordPress后台
2. 进入「外观」→「自定义」→「附加CSS」
3. 粘贴上述任意一段代码，点击「发布」即可生效

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