IE8でグラデーションfilterをかけると:hoverが正常動作しなくなる対策

goto_jp 482views 更新:2014年7月15日

参考元はこちら
http://ellsif.com/blog/?p=76

グラデーションをかけただけではIE8,9で:hover時の挙動がおかしくなる。

CSS(Sass)

下記のようにbackground-colorも合わせてかけておくことで回避できる。

.button {
    background-color: #fff;
    @include background-image(linear-gradient(top, #fff, #eee));
    @include filter-gradient(#fff, #eee, vertical);

    &:hover, &:active {
        border: solid 1px #ccc;
    }
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません