ホームページ > 記事 > ウェブフロントエンド > 何が問題だったのかを調べてください...._html/css_WEB-ITnose
何が問題だったのかを調べてください...._html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:22:531139ブラウズ
ちょっとした練習をして、マウスがメニュー項目の上をスライドするたびにメニュー項目の背景色を変更したいと思いました。なぜ変更がないのですか...コードは次のとおりです:
1482af4a558f481ffffa439725b12a3f
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7演習1015269a93c95223062f4a48873fc6f4 2cacc6d41bbb37262a98f745aa00fbf0
4e07eaec52b67b6abe4024604b22f1f1 (document ).ready(function(){
function hbtn(btn)
{
$("#" + btn).css("background-color", "green");
}
function lbtn(btn)
{
$("#" + btn).css("背景色", "赤")
}
$("#s1").hover(function(){hbtn("s1");}, function( ){lbtn("s1");});
$("#s2").hover(function(){hbtn("s2");}, function(){lbtn("s2");} );
$("#s3").hover(function(){hbtn("s3");}, function(){lbtn("s3");}); (関数(){hbtn("s4");}, 関数(){lbtn("s4");});
$("#s5").hover(function(){hbtn("s5"); }, function(){lbtn("s5");});
2cacc6d41bbb37262a98f745aa00fbf0
#table1{
margin-right:auto;
フォント - ボディ: 24px;
ボーダー間隔: 0px 0px;
#TABLE1 TD {
背景色: 緑;
カーソル:ポインター;
高さ: 70px;
ボーダー: 2px;
9c3bca370b5104690d9ef395f2c5f8d1
c5123dd6aa288c54801af563363f41f3
6bfb17fbe99c9496cb1ec9d2388dc3b6E334d1a11d8943b3588eac7e5eef3ce25
)
<!DOCTYPE html PUBtdC "-//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><title>练习</title><script src="http://code.jquery.com/jquery-1.10.1.min.js"></script></script><script>$(document).ready(function(){$(".s").bind("mouseover",function(){$(this).css("background","red");});$(".s").bind("mouseout",function(){$(this).css("background","green");});});</script><style>#table1{ margin-left:auto; margin-right:auto; font-family:黑体; font-size:24px; border-spacing:0px 0px;}#table1 td{ background-color:green; background-size:contain; text-align:center; padding:12px; cursor:pointer; height:70px; width:174px; border:2px solid gray;}</style></head><body><table id=table1><tr><td id="s1" class="s">A</td><td id="s2" class="s">B</td><td id="s3" class="s">C</td><td id="s4" class="s">D</td> <td id="s5" class="s">E</td></tr></table></body></html> LS はより簡単な書き方です
あなたは主に 2 つの間違いを犯しています
1. 参照されている JS ファイルは無効です。アクセスして確認できます。
代わりにこれを試してください
2f45be506839779ae40830e0ea51f4532cacc6d41bbb37262a98f745aa00fbf0
2. lbtn の内部が緑色に変わります。 ? hbtn が赤くなり、bg-color に値を代入した箇所が逆に書き込まれます。
もっと簡潔に書けます
りー