HTML网页布局里，鼠标放上去时，页面如何实现导航栏下面内容的切换（HTML+CSS网页布局） 请问如何修改weebly的css或者html代码，使得导航栏...
html\u91cc\u9762CSS\u600e\u4e48\u505a\u9875\u9762\u9f20\u6807\u653e\u4e0a\u540e\u6362\u5c0f\u9875\u9762\u7684\u6548\u679c\u56fe\u9009\u9879\u5361\u5207\u6362\u7684\u6548\u679c~
\u4e3b\u8981\u662f\u7528\u5230\u9690\u85cfhide()\u548c\u663e\u793ashow()\u3002\u8fd9\u79cd\u6548\u679c\u7f51\u4e0a\u6709\u5f88\u591a
\u4f60\u76f4\u63a5\u5728\u767e\u5ea6\u641c\u7d22\u9009\u9879\u5361\u4ee3\u7801\u561b\u3002
\u5176\u5b9e\u5f88\u7b80\u5355\u7684\uff0c\u6211\u51e0\u5929\u521a\u521a\u8bd5\u8fc7\u7684\uff0c\u6548\u679c\u4e5f\u662f\u8ddf\u4f60\u8bf4\u7684\u4e00\u6837\u7684\uff0c\u53ef\u4ee5\u4f7f\u5f97\u5bfc\u822a\u680f\u9f20\u6807\u653e\u5728\u4e0a\u9762\u5c31\u4f1a\u5217\u51fa\u5b50\u76ee\u5f55\u3002\u6211\u732e\u4e0a\u4e00\u5f20\u622a\u56fe\uff0c\u4f60\u53ef\u4ee5\u4ed4\u7ec6\u770b\u4e00\u4e0b\uff1a\u6211\u4eec\u5728\u8bbe\u8ba1\u680f\u70b9\u51fb\u201c\u9875\u9762\u201d\u4fbf\u4f1a\u663e\u793a\u51fa\u6211\u622a\u56fe\u7684\u753b\u9762\uff0c\u6211\u4eec\u8981\u505a\u7684\u5c31\u662f\uff0c\u591a\u5efa\u7acb\u51e0\u4e2a\u9875\u9762\u5185\uff0c\u7136\u540e\u628a\u5efa\u7acb\u597d\u7684\u9875\u9762\u76f4\u63a5\u9f20\u6807\u5355\u51fb\u62d6\u5230\u60f3\u8981\u6dfb\u52a0\u7684\u680f\u76ee\u4e0b\u9762\u5c31\u53ef\u4ee5\u4e86\u3002\u5f88\u65b9\u4fbf\u7684\uff0c\u4e5f\u4e0d\u7528\u4ec0\u4e48\u4ee3\u7801\u554a\uff0c\u4ec0\u4e48\u7684\u3002
\u80fd\u591f\u770b\u61c2\u6211\u8bf4\u7684\u7f51\u53cb\uff0c\u8bf7\u652f\u6301\uff01\uff01\uff01
1、利用css的:hover
<div id="content">
这是原本的div层
<div id="show">
<p>这是鼠标移动上去后的div层</p>
</div>
</div>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#content{
background:#0CF;
height:200px;
width:200px;
margin-left: 20px;
margin-top: 20px;
}
#show{
width:200px;
height:200px;
margin-top: 20px;
background:#F09;
top:0px;
position:absolute;
opacity: 0;
display: block;
font-size: 12px;
transition: 0.3s;
-webkit-transition: .5s;
-moz-transition: .5s;
}
#content:hover #show{
color: #656e73;
opacity: 1;
}
</style>
最简单的就是你写三个切换标签，定位好，然后再在下面写三个div，每个div包含一个标签的内容，默认第一个显示，其他两个隐藏，然后通过js来移动到第一个标签上显示第一个div的内容，后面一样
绛旓細1銆佸埄鐢╟ss鐨:hover <div id="content"> 杩欐槸鍘熸湰鐨刣iv灞 <div id="show"> <p>杩欐槸榧犳爣绉诲姩涓婂幓鍚庣殑div灞</p> </div> </div> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ background:#0CF; height:200px; width:200...
绛旓細涓锛氶氳繃css鏍峰紡涓鐨 ":hover"瀹炵幇锛屼唬鐮佸涓 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{background:red;width:200px;height:200px;}div:hover{background:red;width:500px;height:500px;}</style></head><body><div>鍙樺ぇ</div></...
绛旓細濡備笅绀轰緥锛宱nmousemove灏辨槸榧犳爣鎮诞div鐨勬椂鍊欓噰鐢╠1鏍峰紡锛屽綋榧犳爣绂诲紑灏变娇鐢╠2鏍峰紡锛宮argin-top灏辨槸涓涓婇潰鐨勮窛绂伙紝鎺у埗杩欎釜璺濈灏辫兘瀹炵幇div鍚戜笂绉诲姩鐨勬晥鏋溿傜ず渚嬶細<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>绀轰緥</title><style type="text/css">....
绛旓細杩欎釜鍙灏嗗厓绱犳牱寮忕殑hover浼被璁剧疆杈规鍗冲彲銆<!DOCTYPE html><html lang="en"><head> <style> .div-style1 { width: 200px; height: 200px; background-color: red; float: left; } .div-style2 { width: 200px; height: 200px; background-color...
绛旓細auto :銆 榛樿鍊笺傛祻瑙堝櫒鏍规嵁褰撳墠鎯呭喌鑷姩纭畾榧犳爣鍏夋爣绫诲瀷銆俛ll-scroll :銆 IE6.0 鏈変笂涓嬪乏鍙冲洓涓澶达紝涓棿鏈変竴涓渾鐐圭殑鍏夋爣銆傜敤浜庢爣绀椤甸潰鍙互鍚戜笂涓嬪乏鍙充换浣曟柟鍚戞粴鍔ㄣ俢ol-resize :銆 IE6.0 鏈夊乏鍙充袱涓澶达紝涓棿鐢辩珫绾垮垎闅斿紑鐨勫厜鏍囥傜敤浜庢爣绀洪」鐩垨鏍囬鏍忓彲浠ヨ姘村钩鏀瑰彉灏哄銆俢rosshair :銆 绠鍗...
绛旓細鍙互灏嗘墍瑕佸彉鑹茬殑鏂囧瓧鏀捐繘涓涓爣绛閲岋紝姣斿<p>鏍囩锛岃鍚庡杩欎釜鏍囩娣诲姞涓涓猦over灞炴э紝鍗冲綋榧犳爣鍋滅暀鍦ㄨ繖涓爣绛句笂鏃朵細瑙﹀彂璁惧畾濂界殑鏁堟灉銆備互涓嬫紨绀哄叿浣撴楠ゃ1銆佹墦寮涓涓HTML鏂囦欢锛屾坊鍔犲ソ鍩烘湰鏍囩骞跺湪body鏍囩閲屾坊鍔爌鏍囩锛屽苟鍦╬鏍囩閲屾坊鍔犳墍瑕佸彉鑹茬殑鏂囧瓧銆2銆佹帴涓嬫潵瀵筽鏍囩娣诲姞css鏍峰紡锛屽苟娣诲姞hover灞炴...
绛旓細1銆侀渶瑕佺粨鍚圝avaScript瀹炵幇锛岄鍏堟墦寮sublime text缂栬緫鍣紝鏂板缓涓涓html鏂囦欢锛屽啓鍏ヤ竴涓爣绛惧拰寮瑰嚭灞俤iv锛屽垎鍒缃畠浠殑榧犳爣绉诲叆鍜岀Щ鍑轰簨浠讹紱鏈鍚庣畝鍗曠殑璁剧疆涓や釜html鏍囩鐨勬牱寮忥紝璁╁脊鍑哄眰榛樿闅愯棌锛岃缃脊鍑哄眰鐨勫ぇ灏忚儗鏅瓑灞炴э細2銆佹帴鐫鍦ㄤ笅鏂圭殑script鏍囩璁剧疆涓や釜鍑芥暟锛屼竴涓槸榧犳爣绉诲叆鏃惰Е鍙戠敤鏉ユ樉绀篸iv锛屽彟...
绛旓細娴忚鍣鍐绯荤粺鍐呴儴鐨勮缃拰榧犳爣绯荤粺鍐呴儴璁剧疆鍏卞悓褰㈡垚鐨勭粨鏋溿傛牴鎹煡璇㈢浉鍏冲叕寮淇℃伅鏄剧ず鍦╤tml涓紶鏍囨斁涓婂幓鍥剧墖涓婁笅璺冲姩涓涓嬬殑鐜拌薄鏄祻瑙堝櫒鍐呯郴缁熷唴閮ㄧ殑璁剧疆鍜岄紶鏍囩郴缁熷唴閮ㄨ缃叡鍚屽舰鎴愮殑缁撴灉銆HTML鐨鍏ㄧО涓鸿秴鏂囨湰鏍囪璇█锛屾槸涓绉嶆爣璁拌瑷銆
绛旓細瀹炵幇榧犳爣鎮仠鏄剧ず鏂囧瓧锛宧tml涓浣跨敤title灞炴у氨鍙疄鐜版樉绀烘枃瀛楃殑鏁堟灉锛岃繖涓睘鎬ц繕鏄瘮杈冨疄鐢ㄧ殑锛屼綘鍙互鍙傝冧笅 <a href="#" title="杩欓噷鏄樉绀虹殑鏂囧瓧">hello</a> 褰撻紶鏍囨偓鍋滃湪 hello涓婁竴浼氬氨浼氭湁鏂囧瓧 "杩欓噷鏄樉绀虹殑鏂囧瓧" 鏄剧ず銆
绛旓細js mouseover浜嬩欢 浜嬪厛涓鍧楀尯鍩熼殣钘 榧犳爣缁忚繃灏辨樉绀
