タイトルが少し分かりにくいですね。
CSSでhover時の背景色を 指定する際に、グラデーションを使いたいという時のお話です。
モダンブラウザでは普通にCSS3の「linear-gradient」に各ベンダープレフィックスを頭に付ければ実装できますが、IEではそうはいきません。
IEでグラデーションを指定する場合は、filterを使います。
======================================================================
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFEFE', endColorstr='#DFDFDF',GradientType=0 );
======================================================================
これを用いてaタグのhover時に単純なグラデーションを指定してみると下記のようになります。
======================================================================
a:hover{
background: -webkit-linear-gradient(top, #FEFEFE 0%,#DFDFDF 100%);
background: -moz-linear-gradient(top, #FEFEFE 0%,#DFDFDF 100%);
background: -o-linear-gradient(top, #FEFEFE 0%,#DFDFDF 100%);
background: -ms-linear-gradient(top, #FEFEFE 0%,#DFDFDF 100%);
background: linear-gradient(top, #FEFEFE 0%,#FEFEFE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFEFE', endColorstr='#DFDFDF',GradientType=0 );
}
======================================================================
画像を使わずCSSだけで大きなボタンを作る場合、aタグをdisplay:block;でブロック要素にしてクリック領域を大きくすることがよくあります。
その場合、hover時に上記のような指定をしておくと、IE以外のモダンブラウザではaタグの領域どこにマウスを乗せても一つのブロックとして普通にグラデーションが表示されますが、
IEの場合、aタグで囲まれた要素上（aタグでテキストや画像を囲んでいるのならその要素上）以外の領域にマウスを乗せるとチカチカとチラつきが発生します。
面倒なことにIE9ですら発生します。
IE9の場合、チラつき中はカーソルの形状も「指先」と「矢印」が激しく交互に入れ替わる感じの動作をして落ち着きがありません。
■対処法
結論としては、「先ほどのa:hoverの指定の後にIEのみにbackgroundの指定をしてあげる。」というものです。
これでなぜか綺麗にhoverしてくれます。
理由は知りません。
IEのみにcssを指定する方法はいくつかありますが、私のオススメは条件分岐によって各IEの名前を取ったクラスをhtmlタグに付与させる方法です。
======================================================================
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="ja" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="ja" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="ja" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="ja" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="ja">
<!--<![endif]-->
<head>
・
・
・
======================================================================
上記のようにie6～ie9までのクラスをhtmlタグに付与することで、validにcss指定できます。
これを使いIE6～IE9にのみhover時のbackgroundを指定してあげます。
======================================================================
.ie6 a:hover,
.ie7 a:hover,
.ie8 a:hover,
.ie9 a:hover {
background: #ccc;
}
======================================================================
背景指定するカラーは何でも良さそうです。
結局反映されません。
なぜこれでチラつきがなくなり、ちゃんと動作するようになるのか謎ですが、とりあえず解決できたので良しとします。
