jquery - 响应式布局需要悬停状态

Question

我的网站上有一个可爱的悬停状态，在幻灯片的底部有一个带有内容的框飞起来。但我希望内容显示的悬停状态在较小的屏幕上始终可见。不过，我没有运气让这发生。悬停状态在“a href”上。

这是用 CSS 还是用 jQuery 完成的？不管怎样，有没有人有具体的指示，他们可以为此发送给我？

相关(我认为):此主页上的某些内容使屏幕向左/向右滚动。我还没有找到导致这种情况的 div，但我显然遗漏了一些东西。

site

Answer 1

Media queries应该是你要找的:

<style>
@media (max-width: 600px) {
  .my-class {
    display: none;
  }
}
</style>

当屏幕宽度为 <600px 时，这个简单的示例将隐藏 .my-class。您需要做的是定义一条规则，如果屏幕低于特定边界，则将不同的 CSS 样式应用到您的元素，如果屏幕尺寸高于边界，则定义另一条规则，应用“正常”样式。如果您发布代码，我可以使用更具体到您网站的内容更新示例。