Question

我正在创建一个网站，当用户将鼠标悬停在图片上时会看到该文字。问题是，它不适用于移动设备（触摸屏等）。所以我一直在编写一个脚本来检测客户端是桌面还是移动，如果它是移动的，它会立即在图像上显示文本。但它并没有真正起作用。有人能找到我的错吗？以下是测试网页的链接：Link。代码可以在头部找到。（抱歉，我不知道如何将其粘贴）

谢谢！

Answer 1

像bootstrap这样的东西会自动将您的悬停事件转换为移动设备上的点击事件

另一种选择是使用@media查询使其在移动设备上可见

use @media(min-width:768px){
    .textOnHover{
        visibility:visible;
    }
}

Answer 2

您应该使用功能检测来完成此类任务，而不是浏览器检测。请查看Modernizr以检测客户端浏览器上的触摸功能。然后，您可以使用他们的JavaScript API来解决您的问题。

如果您在Modernizer构建中选择CSS类名，它会向您的<html>元素添加辅助类，这样您就可以使用完全CSS解决方案，如下所示：

.touch .text {
    visibility:visible;
}

使用javascript显示图像需要帮助

2 个答案: