6

这是我在这里的第一个问题，但我只想说这个网站多年来帮助了我无数次。我想我已经到了有自己的问题要问的阶段！

抱歉，如果问题不清楚，我会尝试详细说明：我已经为我的一些元素分配了一个过渡，这样当它们悬停在上面时，它们会向上上升（即；.example:hover {margin-top: -25px}）。

你可以看到我在这个页面上应用了这个。

将鼠标悬停在“即将推出”警报框下方的元素上（即“Pixel Perfect Designs”、“Beautifully Clean Code”和“Over 5 years Experience”）。

一切正常，但是您会注意到，当浏览器窗口重新调整到足够小以使元素垂直堆叠（我相信这是@media (max-width: 767px)）时，悬停效果似乎不太干净。当网站以这种方式显示时（对于移动设备），我想完全删除效果。

所以问题是如何根据浏览器的宽度更改类的属性？我想在为移动设备显示时（即< 767px）悬停时删除边距顶部，但在正常查看时将其保留在那里。

谢谢

4

3 回答 3

9

你只需要添加一个小东西。

@media (max-width: 767px) {
  .shift:hover {
    margin-top: 0;
  }
}

如果在小型设备上工作，那么使用过渡属性有什么好处，因为我们不希望对此视口有任何更改/影响。所以添加它也是为了在移动浏览器上快速渲染。

@media (max-width: 767px) {
  .shift {
    transition:none;
    -webkit-transition:none;
    -moz-transition:none;
  }
}
于 2013-04-08T06:10:07.733 回答
4

只需@media像这样包装相应的 CSS 规则：

@media (min-width: 768px) {
    .example:hover {
        margin-top: -25px;
    }
}

请注意，我使用的是 min-width - 这不包括“电话”视图中的规则。

于 2013-04-07T06:38:32.633 回答
2

样式来自您拥有的 docs.css： 

.shift:hover {
margin-top: 40px !important;
}

正如@dequis 所指出的，@media 查询是要走的路。由于当 3 列堆叠在移动屏幕上时悬停效果效果不佳，一种可能性是您可以删除垂直过渡并用水平过渡替换它，在 docs.css 中添加如下内容： 

@media (max-width: 767px) {
.shift:hover {
margin-top: 0 !important; /* it's possible this might need some fine-tuning */
margin-right: -20px;
}

}

一旦它到位，这可能需要一些调整，如果需要的话，这会很容易。

祝你好运！

于 2013-04-07T14:09:11.320 回答