ホームページ > 記事 > ウェブフロントエンド > CSS マウスは、menu_html/css_WEB-ITnose を通過すると色が変わります
CSS マウスは、menu_html/css_WEB-ITnose を通過すると色が変わります
- WBOYオリジナル
- 2016-06-21 09:28:221761ブラウズ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>#navigation{ width:200px; font-family:Arial, } #navigation ul{ list-style-type:none; margin:0px; padding:0px; } #navigation ul li{ border-bottom:1px solid #ed9f9f; }#navigation ul li a{ display:block; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #711515; border-right:1px solid #711515; } body{ background-color:#FFC; }#navigation li a:link,#navigation li a:visited{ background-color:#c11136; color:#ffffff;}#navigation li a:hover{ /* 鼠标经过时 */ background-color:#990020; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */}</style></head><body><div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">My Blog</a></li> <li><a href="#">Friends</a></li> <li><a href="#">Next Station</a></li> <li><a href="#">Contact Me</a></li></div></body></html> #navigation li a:link,#navigation li a:visited{
background-color:#c11136;
color:#ffffff
}
この段落は次のように書きました
#navigation ul li a:link , #navigation ul li a:visited{
background-color:#c11136;
color:#ffffff;
}
(li の前に余分な ul があることに注意してください) メニューの色の変更効果が実現できないのはなぜですか?指定したulタグの下にマウス通過イベントをin liで表現するのは正しいでしょうか？なぜ不可能ではないのでしょうか？
ディスカッションへの返信（解決策）
投稿者がコードをコピーしましたが、A タグの疑似接続属性は正常です。
#navigation li a:link,#navigation li a:visited{
background-color:#c11136;
color:#ffffff;
} を
#navigation li a:link,#na vigation ulli a: に書き換えます。 Visited{
background-color:#c11136;
color:#ffffff; }
以下の pseudo-connection 属性にも ul を追加する必要があります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。