0

CSS3 トランジションとメディア クエリを利用したレスポンシブ デザインの Web サイトに取り組んでいます。そのため、「slider」というクラス名でいくつかの div を作成しました。CSS には 2 つのルールがあります。1 つはホバー状態の幅を宣言するルールで、もう 1 つはトランジションを指定するルールです。

例えば：

#navcontainer .slider:hover{
width: 38px;
}
#navcontainer .slider{
-webkit-transition: width 2s;
}

以下は機能しますが、次のようなメディア クエリ内に別のルールを追加すると機能しません。

@media(max-width: 440px){
#navcontainer .slider:hover{width: 56px;}
}

助言がありますか？

4

2 に答える 2

0

@mediaあなたはあなたの質問のセレクターが正しいことを知っています:hoverか？

私にとってはうまくいくようです。このデモでは、ルールの背景の変更を追加した@mediaので、より明確になります。中央の境界線を左右にスライドして、ペインのサイズを変更し、@mediaスタイルをトリガーします。

デモ： http： //jsfiddle.net/Marcel/k8ePf/

于 2013-01-07T23:42:25.210 に答える
0

動作するはずですが、通常は @media(){} だけでなく、「@media only screen and (max-width: 440px){}」を使用します。

メディア クエリは css ファイルの一番下にありますか? （違いはありませんが、誰が知っていますか？）。また、トランジションには他のベンダー プレフィックスを使用する必要があると思います。

transition:...;
-o-transition:...;
-moz-transition:...;
-webkit-transition:...;

また、これらの遷移行を @media(){} の内部にコピーしようとします。

繰り返しますが、私はそれがそのまま機能するべきだと思います。

于 2013-01-07T23:40:43.710 に答える