帮忙看看到底哪里出错了...._html/css_WEB-ITnose
做了一个小练习,想要每次鼠标滑过菜单项时,菜单项的背景色改变一下。为什么没变化呢....代码如下:
nbsp;html PUBtdC "-//W3C//Dtd XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">
<script> <br /> </script>
<script> <br /> $(document).ready(function(){ <br /> function hbtn(btn) <br /> { <br /> $("#" + btn).css("background-color", "green"); <br /> } <br /> function lbtn(btn) <br /> { <br /> $("#" + btn).css("background-color", "red"); <br /> } <br /> $("#s1").hover(function(){hbtn("s1");}, function(){lbtn("s1");}); <br /> $("#s2").hover(function(){hbtn("s2");}, function(){lbtn("s2");}); <br /> $("#s3").hover(function(){hbtn("s3");}, function(){lbtn("s3");}); <br /> $("#s4").hover(function(){hbtn("s4");}, function(){lbtn("s4");}); <br /> $("#s5").hover(function(){hbtn("s5");}, function(){lbtn("s5");}); <br /> }); <br /> <br /> </script>
A | B | C | D | E |
回复讨论(解决方案)
<!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是简单点的写法
你主要错在两处
1.引用的JS文件失效了,你可以访问一下看看。
换这个试试
2.lbtn里面应该是变绿吧?hbtn是变红,你里面给bg-color赋值的地方写反了。
可以写得简洁一点
<!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><style> table{ margin-left:auto; margin-right:auto; font-family:黑体; font-size:24px; border-spacing:0px 0px; } table td{ background-color:green; background-size:contain; text-align:center; padding:12px; cursor:pointer; height:70px; width:174px; border:2px solid gray; } .bg{ background: red; }</style></head><body> <table> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> </tr> </table> <script> $(document).ready(function(){ $('td').hover(function(){ $(this).addClass('bg'); },function(){ $(this).removeClass('bg'); }) }) </script></body></html>

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

本文討論了HTML&lt; Progress&gt;元素,其目的,樣式和與&lt; meter&gt;元素。主要重點是使用&lt; progress&gt;為了完成任務和LT;儀表&gt;對於stati

本文討論了html&lt; datalist&gt;元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

本文討論了HTML&lt; meter&gt;元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了&lt; meter&gt;從&lt; progress&gt;和前

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

本文討論了&lt; iframe&gt;將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
