0

好的，我希望这一切都有意义，但是我们开始...

我目前正在构建一个响应式站点，但是桌面版本已经完成。我在 div 包装器中有一个图像。它具有悬停状态并显示一些测试。这一切都是通过 CSS 完成的。

现在在平板电脑上，我希望能够为文本创建下拉菜单，而不是悬停状态。但问题是当我将鼠标悬停在需要单击内容显示的平板电脑版本（最大宽度：1024px）的 div 上时。但我只希望它在 jquery 中显示 onClick。

这是在网站本身上设置的 CSS 网站：

.textHoverWrapOne:hover div.block-50_textHoverOne, .textHoverWrapTwo:hover div.block-50_textHoverTwo, .textHoverWrapThree:hover div.block-50_textHoverThree,.textHoverWrapFour:hover div.block-50_textHoverFour, .textHoverWrapFive:hover div.block-50_textHoverFive, .textHoverWrapSix:hover div.block-50_textHoverSix{
    visibility: visible;
     opacity: 1;
     -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

我希望能够删除平板电脑的样式和任何更小的样式。但我似乎无法清除它们。我能想到的唯一方法是在移动/平板设备上使用 jQuery 删除类，但这似乎太 hacky。

有没有办法可以将样式设置为仅使用媒体查询出现在超过 1024 像素的任何内容上？

4

2 回答 2

5 
@media screen and (min-width: 1024px) {
  // your rules here
}
于 2013-08-28T13:39:35.897 回答
2

非常简单地：

@media (min-width: 1024px)
于 2013-08-28T13:39:00.067 回答