[解決済み] CSSのホバー効果が私のコードで機能しない
2022-01-24 04:20:11
質問
以下のコードはIE9で正常に動作し、他のブラウザでは動作しません。リストの上にマウスを乗せると背景の色が変わるはずですが、変わりません。
.menunews ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menunews a {
display: block;
color: #266CAE;
height: 30px;
background: #ffffff;
border-bottom: 1px solid #ccc;
overflow: hidden;
width: 100%;
height: 2.72em;
line-height: 2.75em;
text-indent: 2.02em;
text-decoration: none;
}
.menunews li a:hover {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color- stop(47%, #f6f6f6), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
color: #266CAE
}
<ul style="font-size:12px;">
<li class="menunews">
<a href=""><span style="margin-left:2px;">Hello test</span></a>
</li>
</ul>
解決方法は?
を作成しました。 CSS を理解できない理由です。 CSSコード そこで、私はあなたの css どのブラウザでも正常に動作するようになりました。
ul li.menunews {
border-bottom: 1px solid #ccc;
list-style:none;
height:30px;
}
ul li.menunews a {
display:block;
color:#266CAE;
text-decoration:none;
}
ul li.menunews:hover {
background:#ffffff;
background:-moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color- stop(47%,#f6f6f6), color-stop(100%,#ededed));
background:-webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );color:#266CAE}
}
<ul style="font-size:12px;">
<li class="menunews"><a href="#"><span style="margin-left:2px;">Hello test</span></a></li>
</ul>
関連
-
[解決済み】WebページでWindows 95のフォントを使用する
-
[解決済み] html : iframeでhtmlのコンテンツが表示されない。
-
[解決済み] css画像が表示されない
-
[解決済み] Railsです。railsアプリで<img src= >をimage_tagに変換する方法
-
[解決済み] head」タグと「header」タグの本当の違いは何ですか?[重複】について]
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】HTML5検証エラー:body開始タグは見たが、同じタイプの要素がすでに開かれていた
-
[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
-
[解決済み】iframeの高さを100%にする方法【重複】。
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み] span with onclick event inside the tag
-
[解決済み] フレックスアイテムを右にフロートさせる
-
[解決済み] div に斜めのエッジを作成する [重複] 。
-
[解決済み] will-change' や translateZ() ハックは 'transition: height' のパフォーマンスを向上させるか?
-
[解決済み] 入力のラジオ要素を水平に揃えるにはどうしたらいいですか?
-
[解決済み] margin-block-startとmargin-topの違いは何ですか?