2

我正在使用 jQuery 悬停效果创建一个网站。该网站在桌面上非常完美，鼠标在图像上我有一个悬停效果，在图像上放置一个黑色层并显示框内的文本，然后单击里面的链接，我将重定向到页面，但是当我尝试使用 ipod touch/iphone/ipad 时，它不起作用。

这是小提琴：http: //jsfiddle.net/IronFeast/RvfQg/

如何修改我的代码？我想重新双击该框以显示里面的内容：第一次单击）选择；第二次单击）开始效果。

任何帮助，将不胜感激。

4

2 回答 2

5

我喜欢你在这里使用所有 CSS 的方式。你的问题并不完全清楚，但我认为这就是你想要的：http: //jsfiddle.net/howlermiller/fUSXp/2/（在 iPad 上尝试）

使用 jQuery 获得此功能会非常简单，但由于您已经投入了一些工作以使其全部使用 CSS，因此我将答案保留为所有 CSS。我使用了checkbox hack，并在 iPad 上对其进行了测试以确保它可以正常工作。

这个 hack 也适用于桌面浏览器，所以如果你点击这个框，那么样式将保持不变，而不是在鼠标关闭时消失。这可能是好事也可能是坏事，这取决于您将如何处理它。

PS 使用纯 CSS（又名复选框 hack）并不是最好的方法。它使您的代码不太灵活且可重用性降低。但它确实工作得很好。

编辑：停止印刷机，Safari 5 中有一个错误。由于这个 StackOverflow 问题，我找到了它。修复它所需要做的就是在标签上添加一个空的 onclick（是的，是的，另一个 hack，我知道，我也不满意）。在我自己的测试中，Safari 6 似乎没有这个错误，所以除非你支持 Safari 5，否则你不需要它（实际上，现在这可能是一个好主意。如果你在少数情况下使用它不过几个月，那么您可能可以使用旧小提琴）。这是固定的 jsfiddle：http: //jsfiddle.net/howlermiller/fUSXp/3/

于 2012-10-12T12:35:48.007 回答
0

作为替代方案，您还可以尝试在单击元素时向元素添加类似“悬停”的类，并修改您的 CSS 以在两种情况下进行动画处理：使用伪选择器（如 :hover）和元素实际具有类“悬停”时。

在添加到当前单击的元素之前，您可能希望从单击的元素的所有其他同级中删除该类。

CSS 中的更改将与此类似：

.view-sixth.hover a.info,
.view-sixth:hover a.info {...}

所以基本上为每个动画元素添加两个类似的选择器。

于 2012-10-12T10:04:51.733 回答