CSS下鼠标悬停在一个DIV时显示另外一个DIV，为何显示不出来？ 鼠标滑过div让另外一个div从隐藏变为显示
css\u5f53\u9f20\u6807\u60ac\u505c\u5728\u4e00\u4e2adiv\u4e2d\u4e3a\u4ec0\u4e48\u5176\u4ed6\u7684div\u4f1a\u6536\u5230\u5f71\u54cd\u800c\u6d6e\u52a8\uff1f\u8fd9\u4e2a\u5f88\u53ef\u80fd\u662f\u4f60\u7684\u7c7b\u8bbe\u7f6e\u95ee\u9898\uff0c\u4f60\u5e94\u8be5\u662f\u8bbe\u7f6e\u4e86\u7236\u7ea7\u4e86\uff0c\u8fd9\u6837\u5b50\u7ea7\u7ee7\u627f\u4e86\u7236\u7ea7\u7684\u5c5e\u6027\uff0c\u81f3\u4e8e\u5177\u4f53\u60c5\u51b5\u8fd8\u5f97\u770b\u4f60\u4ee3\u7801
1\u3001\u7ed9\u9f20\u6807\u7ecf\u8fc7\u7684DIV\u6dfb\u52a0\u4e00\u4e2a\u7c7b \uff0c\u7c7b\u540d\u4e3asubmeau\uff1b\u5982\u4e0b\u56fe\uff1a
2\u3001\u7ed9\u663e\u793a\u6216\u8005\u9690\u85cf\u7684DIV\uff0c\u6dfb\u52a0\u4e00\u4e2aID\uff0cID\u540d\u4e3a:id="oa_submeau"\uff0c\u5982\u4e0b\u56fe\uff1a
3\u3001\u5c06\u4ee5\u4e0b\u7684JQUERY\u4ee3\u7801\u653e\u5728\u6574\u4e2a\u7f51\u9875\u7684\u6700\u5e95\u90e8\uff0c\u7528\u4e8e\u63a7\u5236\u9f20\u6807\u7ecf\u8fc7\u663e\u793aDIV\uff0c\u79bb\u5f00\u9690\u85cfDIV\u3002
$("#oa_submeau").hide();
$(".submeau").hover(function () {
$("#oa_submeau").show();
}, function () {
$("#oa_submeau").hide();
})
// \u9f20\u6807\u79fb\u52a8\u5230list\u7684div\u4e0a\u7684\u65f6\u5019list div\u4e0d\u4f1a\u88ab\u9690\u85cf
$("#oa_submeau").hover(function () {
$("#oa_submeau").show();
}, function () {
$("#oa_submeau").hide();
})
\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u5b9e\u73b0\u9f20\u6807\u7ecf\u8fc7\u67d0\u4e2a\u533a\u57df\u65f6\u663e\u793a\u9690\u85cf\u7684DIV\uff0c\u79bb\u5f00\u65f6\u518d\u6b21\u9690\u85cfDIV\u3002
当然了，这种写法浏览器兼容性不是很好，IE就不要指望了，尤其版本之间差异还蛮大的。如果是为了学习那倒无所谓了
亲，你的css中在#third的样式中，左后一个display，代表隐藏这个div，去掉就好了。
#third{width:100px;height:30px;background-color:#A09C9C;float:left;display:none}
sec和third的父元素：hover #third{display:block;}
用jquery来实现多美 哈哈
绛旓細褰榧犳爣鏀惧埌div涓婏紝鑾峰彇鍙涓涓猟iv鐨刢lass鏀瑰彉鏍峰紡灏辫浜嗭紝js鍜css閮藉彲浠ュ疄鐜帮紝寰堢畝绛旂殑锛屾瘮濡傜涓涓猟iv class鍙玥锛岃鏀瑰彉鍙玠锛岄偅涔堜箙鏄 css:.h:hover .d{background:#ff6a00;} jq:(".h").hover(function () { (".d").css("background", "#ff6a00");});...
绛旓細鏄彲浠ュ疄鐜扮殑銆<div class='parent'> <p>鏀句笂鍘榧犳爣璇曚竴涓</p> <p class='p'>鐪嬭鎴戜簡鍚楋紵锛燂紵</p></div><style type="text/css" media="screen"> .parent{border:1px solid #eee;margin-top:10px;text-align: center;} .parent p{cursor: pointer;} .parent ....
绛旓細div{width:100px;height:100px;} div:hover{width:200px;height:100px;}濡傛灉浣犳槸鎯虫妸class="xxx"杩欎釜鏍峰紡鍚嶆崲鎺夌殑璇濓紝閭ｅ氨闇瑕侀氳繃JS鏉ュ仛浜嗐傘
绛旓細div1:hover+#div2{background-color:green;} 鍦╯tyle涓姞鍏ュ涓婁唬鐮 鐢ㄧ浉閭诲厔寮熼夋嫨鍣 鈥+鈥濓紝褰榧犳爣绉诲叆div1鏃禿iv2鐨勮儗鏅鑹叉敼涓虹豢鑹诧紝濡傛灉浣犳兂瀹炵幇鍏朵粬鏁堟灉锛屾敼鍙樹笂闈唬鐮佷腑鈥渰}鈥濋噷鐨勫唴瀹瑰嵆鍙
绛旓細1. 閫氳繃缂栧啓JavaScript鎴杍Query鑴氭湰锛屽彲浠ュ湪榧犳爣鎮仠(onmouseover)鏃舵樉绀涓涓鎾斁鎸夐挳灞(div)锛岃屽湪榧犳爣绉诲紑(onmouseout)鏃堕殣钘忚鎸夐挳灞傘2. 鍒╃敤CSS鐨:hover浼被锛屽彲浠ュ湪榧犳爣鎸囬拡鎮仠鍦ㄥ厓绱犱笂鏃朵负璇ュ厓绱犳坊鍔犵壒瀹氱殑鏍峰紡銆備互涓嬫槸涓涓畝鍗曠殑CSS瀹炵幇妗堜緥锛屽畠灞曠ず浜嗗浣曞湪榧犳爣鎮仠鍦鍥剧墖涓婃椂鏄剧ず鎾斁鍥炬爣锛歚``...
绛旓細;var divonload=new Array("qwpic1","qwpic2","qwpic3","qwpic4")for(var i = 0; i < parseInt(4); i++){ document.getElementById(divonload[i]).style.display="none";} document.getElementById(qwpic).style.display="block";} </script> </div> 杩欐槸鎴戝仛鐨勶紝鍙傝冧笅 ...
绛旓細鏍峰紡澶ц嚧濡備笅锛div{ background-color:鑳屾櫙鑹诧紱background锛歶rl(绗竴寮犲浘鐗)锛沜olor:瀛椾綋棰滆壊 } div:hover{ background-color:榧犳爣瑕嗙洊鐨勮儗鏅壊锛沚ackground锛歶rl(榧犳爣瑕嗙洊鐨勫浘鐗)锛沜olor:榧犳爣瑕嗙洊鐨勫瓧浣撻鑹 } 杩欐槸绮楃暐鐨勬濇兂锛屽鏋滆繕鏄笉鎳傦紝鎶婁綘鐨勫浘鐗囩粰鎴戙傚垎鍒嗛挓鍐涓涓鍑烘潵 ...
绛旓細鍒濆鏃讹紝浣犻渶瑕佽``鏍囩闅愯棌锛屾墍浠ヨ缃牱寮忎负`p{display:none;}`銆傚悓鏃讹紝缁檂`娣诲姞涓涓绠鍗曠殑鏍峰紡锛屽瀹藉害鍜岄珮搴︼紝渚嬪`div{width:100px;height:100px;background:#ccc;}`锛岃繖鏍蜂究浜庤瑙夋紨绀恒傜劧鍚庯紝涓篳`鍏冪礌娣诲姞`hover`浼被銆傚綋榧犳爣鎮仠鍦``涓婃椂锛屼綘闇瑕佹洿鏀筦`鐨勬牱寮忥紝浣垮叾鏄剧ず銆
绛旓細1銆侀鍏堟墦寮鐢佃剳锛屽苟杩涘叆杞欢css銆2銆佸叾娆℃柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔涓涓猟iv鏍囩銆3銆佹渶鍚庢坊鍔爌鏍囩锛屽嵆鍙皢缁忚繃浜嬩欢鐩存帴鍐欏湪div閲屻
绛旓細鐢css寰堝鏄撳疄鐜帮紝娣诲姞涓涓鏍峰紡cursor: text;锛屼唬鐮佸涓嬶細<!DOCTYPE HTML><html><head> <title>Untitled</title> <style> div{ cursor: text; background: #eeeeee; width: 400px; height: 200px; } </style></head><body><div>Hello World!</div></body></...
