ホームページ >ウェブフロントエンド >htmlチュートリアル >100点！リンクについての質問です！ _html/css_WEB-ITnose
100点！リンクについての質問です！ _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:03:261029ブラウズ
100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e97f2b6ae5f4f65bc7d15c6c9b9e8be8cb2386ffb911b14667cb8f0f91ea547a7Xuxun Spacee0a63d63feec3f11d542cdd086df17ae9c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d23c52b821a645da1818b033a50978bf9d8aba6b7f7f04e5ea8d04959280d1d8c07f53bf0f2dd087bcd034405e26d060f5c69336ffbc20d23018e48b396cdd57a67bc4f89d416b0b8236eaa5f43dee742ホームページ82e295699cff932a4d4dabba39074c35ee7959cc8dd4be16ef633321c03dac3267bc4f89d416b0b8236eaa5f43dee742ダウンロード82e295699cff932a4d4dabba39074c354a11e5928b3688cf38c9163b657eb5ac9ad7ac0094a72417febe733d1b4bbdd6概要82e295699cff932a4d4dabba39074c35cd324b2387ec29e44e8e788c6064887216b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
マウスを上に移動すると DD タグをダウンロードしたいのですが、なぜダウンロードできるのでしょうか？背景色を青に変えてみませんか？
ディスカッションへの返信 (解決策)
a: hover dd {
background:#00F;
color:#FFF;
}
実装する方法はたくさんありますが、HTML コード自体をネストする必要があります。 HTML セマンティクスとは反対です。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>旭讯时空</title><style>*{margin:0px;padding:0px;font-family:"黑体";font-size:30px;}body{background-image: url(Pictures/back.jpg);background-repeat: repeat;}#banner{width:100%;height:100px;background-color:#333;position:absolute;top:100px;text-align:center;}#banner_options{width:1000px;height:100px;margin:0px auto;}dl{color:#00F;line-height:100px;}dd{float:left;width:333px;height:100px;}a{text-decoration:none;color:#00F;}a:hover{background:#00F;color:#FFF; display:block;}</style></head><body><!--导航条，占据整个浏览器的宽--><div id="banner"> <div id="banner_options"> <dl> <dd>首页</dd> <dd><a href="#">下载</a></dd> <dd>关于</dd> </dl></div></div>我想在鼠标移到下载那个DD标签上让背景颜色变成蓝色为什么实现不了？</body></html> // どの背景を変更したいのかわかりませんが、ここにその 1 つがあります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head></head><body><style>* { margin: 0px; padding: 0px; font-family: "黑体"; font-size: 30px;}body { background-image: url(Pictures/back.jpg); background-repeat: repeat;}#banner { width: 100%; height: 100px; background-color: #333; position: absolute; top: 100px; text-align: center;}#banner_options { width: 1000px; height: 100px; margin: 0px auto;}dl { color: #00F; line-height: 100px;}dd { float: left; width: 333px; height: 100px;}a { text-decoration: none; color: #00F;}a:hover { background: #00F; color: #FFF;}</style> <!--导航条，占据整个浏览器的宽--> <div id="banner"> <div id="banner_options"> <dl> <dd>首页</dd> <dd><a href="#">下载</a></dd> <dd>关于</dd> </dl> </div> </div><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script> $(function() { $('#banner_options dl dd a').hover(function () { $('#banner').css('background','#00f'); }, function () { $('#banner').css('background','#eee'); }) }); </script> </body> </html> css を使用するか js を使用するかによって異なります。css の場合は、1 階の記述方法を使用します。js の場合は、jquery フレームワークを使用する方が便利です。このように書くだけです
$("a").hover( function(){ //鼠标移入运行代码 },function(){ //鼠标移出运行代码})； ネイティブ JS を使用する場合は、a タグに onmouseover と onmouseout イベントを記述する必要があります