2012-04-15 3 views
2

メディアクエリCSSファイルのメインCSSファイルに記載されているスタイルエントリを削除するにはどうすればよいですか?a:メディアスタイルシートのホバーを削除しますか?

たとえば、タッチデバイスで使用するa:hover項目を削除したいとします。

のmain.css:a:hover {color:#999999; background:#111111;}

がどのように私はmedia.cssでこれを相殺することができますか?

+1

CSSルールは削除できません。上書きするだけです。だから、あなたはmedia.cssの隠されていない値に色と背景を設定するか、 'a:hover {color:#999999;背景:#111111;} 'main.cssではなく、特別なdesktop.cssにある –

+0

あなたのメディアクエリは何ですか? – BoltClock

答えて

7

CSSルールを「削除」することはできません。 カスケードはそのようには機能しません。

メディアクエリが満たされない場合にのみ、適用するために、ルールを取得する唯一の方法は、どちらかあなたのmain.cssスタイルシート内の@mediaブロックに、クエリの否定バージョンでそれを単離することである。

@media not [your media query] { 
    a:hover {color:#999999; background:#111111;} 
} 

またはあなたのページのヘッド内の別のスタイルシート:

<link rel="stylesheet" media="all" href="main.css"> 
<link rel="stylesheet" media="[your media query]" href="media.css"> 

<!-- Or put this in a separate file and link to it as above --> 
<style media="not [your media query]"> 
a:hover {color:#999999; background:#111111;} 
</style> 

また、あなたのmedia.cssスタイルシート内のスタイルを元に戻すことができ、それの欠点は、あなたが戻って落下する値が何を知っている必要があります。多分デスクトップブラウザの開発ツール、除き


+0

ありがとう、私はスタイルを元に戻すでしょう。私はあまりにも多くのコードを書くことなくそれを行うための派手な方法があると思っただけです。 – Paul

0

あなたのオプションは特異性または輸入物質です。メインスタイルシートの後に同じ特異性を持つメディアクエリースタイルシートを追加するだけです。

0

私が見つけた最良のオプションは、「最小幅」を使用して最初の場所

@media screen and (min-width: 800px){ 
    a:hover {color:#999999; background:#111111;} 
} 

にホバー状態を設定するには、メディアクエリを使用していたとすぐにデスクトップ上でホバー状態を持つことができますが、画面が800px(またはブレークポイントが何であれ)以下になると、すべてのホバー状態が無効になり、そこからのスタイルを正確に設定できます。

関連する問題