css - CSSグラデーション、ホバーすると背景画像が消える

Question

上部の11月のFacebookロゴは、ホバーすると消えます。cssグラデーションを適用しましたが、fbロゴ自体以外の画像はありません。ホバー状態でロゴを表示したままにする方法はありますか？

ここにcssファイル

ありがとう！

こちらのページ

Answer 1

ホバーするとFacebookの背景がグラデーションで上書きされるため、複数の背景を使用する必要があります。

ul#topnav li.facebook a:hover {
background-image: url("../pics/facebook-icon.png"),
            linear-gradient(center top , #444444 0%, #A1A1A1 6%, #575757 100%);
/* facebook icon is on top of a linear gradient */
background-repeat: no-repeat, repeat;
background-position: 8px 2px, 0 0;
}

もちろん、すべてのベンダープレフィックスにこのルールを追加する必要があります。（-moz-、、-webkit-...）

Answer 2

または、アイコンを背景から分離することもできます。つまり、CSSを使用してアイコンを「Facebook」テキストの前に配置し、背景セレクターから完全に独立させます。このような：

li.facebook a::before {

content: "";
position: absolute;
top: 50%;
left: 0;
width: 16px; /* Width of your FB icon */
height: 16px; /* Height of your FB icon */
margin-top: -9px;
background-image: url("path_to_your_FB_icon.png");
background-repeat: no-repeat;

}

お役に立てば幸いです。