响应式布局需要悬停状态处于活动状态答案

【问题标题】：Need the hover state active for responsive layout响应式布局需要悬停状态处于活动状态
【发布时间】：2015-01-20 22:10:34
【问题描述】：

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

这将使用 CSS 还是使用 jQuery 来完成？不管怎样，有没有人可以为此向我发送具体的方向？

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

【问题讨论】：

欢迎来到 Stack Overflow！您能否分享一下您现在为当前行为使用的代码，并描述您为使其他行为发挥作用所做的任何尝试？
感谢您的欢迎！
如果您访问相关网站（上面的链接），我想您会找到所有必要的代码。如果没有，我很乐意发布我目前使用的样式。与此同时，这是我用来尝试在移动布局中工作的东西：code@media only screen and (max-width: 959px) { #services-test.segment .segment-content {margin-顶部：自动；溢出：可见；高度：自动；} .traits-wrapper {高度：自动；位置：相对；} .trait-box {底部：自动；宽度：100%；边距顶部：自动；高度：自动;position: relative;} .trait-box 图 {overflow: visible;} .trait-box dd {overflow: visible;} }
（对不起...显然回复不喜欢硬回馈，我还没有完全弄清楚如何正确粘贴代码...呃）
评论不太喜欢code sn-ps。您将更幸运地编辑原始问题以添加代码（您可以使用代码格式化标签使其看起来不错）。我还没有机会查看您的代码 - 将尽快尝试查看。

【解决方案1】：

Media queries 应该是您要查找的内容：

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

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

【讨论】：

另请参阅：How To Use CSS3 Media Queries To Create a Mobile Version of Your Website 和 Use CSS media queries for responsiveness
如果我正确理解您的答案，这并不能真正解决问题。我知道如何创建媒体查询并拥有不同的 CSS。这里的问题是，不仅仅是由不同字体颜色或装饰组成的悬停状态。在这种情况下，有几个 div，在正常状态下折叠，在悬停状态下展开并显示内容。我正在寻找的是 CSS（或者我可能在这里需要一些 jQuery？我不知道），在移动设置中，只有悬停状态才是这些 div 的唯一状态。
我明白了——我想我明白你想要做什么。是的，仅仅在媒体查询中打开或关闭悬停状态是不够的。您可能需要退回到 jQuery 之类的东西，但我认为这可以通过直接的 CSS 来完成。我还没有机会看代码，对不起。我很快就会去看看。