我一直在开发一个使用 CSS3 过渡和媒体查询的响应式设计网站。因此，我创建了几个类名为“slider”的 div。我的 CSS 中有两条规则，一条用于声明悬停状态宽度，另一条用于指定过渡。
例如：
#navcontainer .slider:hover{
width: 38px;
}
#navcontainer .slider{
-webkit-transition: width 2s;
}
以下将起作用，但当我在这样的媒体查询中添加另一个规则时不起作用：
@media(max-width: 440px){
#navcontainer .slider:hover{width: 56px;}
}
有什么建议么？
它应该可以工作......但我通常使用“@media only screen and (max-width: 440px){}”，而不仅仅是@media(){}。
您的媒体查询在您的 css 文件的底部？（它不应该有任何区别，但谁知道呢？）。另外，我认为您应该使用其他供应商前缀进行转换：
transition:...;
-o-transition:...;
-moz-transition:...;
-webkit-transition:...;
我也会尝试将这些过渡线复制到 @media(){} 内部
再说一次，我认为它应该按原样工作。
您知道@media问题中的选择器是 a :hover，对吗？
似乎对我来说工作得很好。在此演示中，我为@media规则添加了背景更改，因此更加明显，只需左右滑动中间边框即可调整窗格大小并触发@media样式。