我想实现这样的功能：先将DIV元素隐藏，当鼠标移动到隐藏元素所在位置时DIV显现。 jq怎样实现鼠标经过隐藏，离开显示div层
JQUERY\u591a\u4e2aDIV\u9f20\u6807\u79fb\u5165\u79fb\u51fa\u663e\u793a\u9690\u85cf\u5bf9\u5e94DIV\u5b9e\u73b0\u8fd9\u79cd\u529f\u80fd\u7684jquery\u662f\u76f8\u5f53\u7b80\u5355\u7684\uff0clist\u5143\u7d20\u9f20\u6807\u79fb\u5165\uff0c\u5f53\u524d\u5143\u7d20\u91cc\u7684 span\u663e\u793a\uff1b\u79fb\u51fa\u5219\u76f8\u53cd\uff0c\u5177\u4f53\u4ee3\u7801\u5982\u4e0b\uff1a
$(function(){//\u9f20\u6807\u79fb\u5165$('.list').mouseenter(function(){//\u8fd9\u91cc\u4f7f\u7528mouseover\u4e5f\u53ef\u4ee5\uff0c\u4f7f\u7528mouseenter\u662f\u9632\u6b62\u5192\u6ce1(this).find('span').show();//\u8fd9\u91cc\u7684show\u53ef\u4ee5\u6539\u6210animate\uff0ctoggle\u90fd\u53ef\u4ee5});//\u9f20\u6807\u79fb\u51fa$('.list').mouseleave(function(){//\u8fd9\u91cc\u4f7f\u7528mouseover\u4e5f\u53ef\u4ee5\uff0c\u4f7f\u7528mouseenter\u662f\u9632\u6b62\u5192\u6ce1$(this).find('span').hide();//\u8fd9\u91cc\u7684hide\u53ef\u4ee5\u6539\u6210animate\uff0ctoggle\u90fd\u53ef\u4ee5});});
Document*{margin: 0px;padding: 0px;list-style: none;text-decoration: none}/*\u901a\u914d\u7b26\uff0c\u4e2a\u4eba\u4e60\u60ef*/.box{width: 100px;height: 100px;}.box_div{width: 100px;height: 100px;background: #FFFF00} $(function(){$(".box").mouseover(function(){$(".box_div").hide(); //\u9690\u85cf})$(".box").mouseout(function(){$(".box_div").show(); //\u663e\u793a})})//mouseover \u5f53\u9f20\u6807\u6307\u9488\u4f4d\u4e8e\u5143\u7d20\u4e0a\u65b9\u65f6\uff0c\u4f1a\u53d1\u751f mouseover \u4e8b\u4ef6\u3002//mouseout \u5f53\u9f20\u6807\u6307\u9488\u79bb\u5f00\u88ab\u9009\u5143\u7d20\u65f6\uff0c\u4f1a\u53d1\u751f mouseout \u4e8b\u4ef6\u3002//hide(); hide() \u9690\u85cf//show(); show() \u663e\u793a\u6211\u662fdiv
style写在head标签里面
div里面加几个字，看得出效果
你少了title，meta标签，还有最上面的<!DOCTYPE html>
我试了你的代码，的确有问题，hover和display用效果不好实现。不太清楚你具体要什么效果，不过不一定用display属性来控制，可以换种方式，用background来实现，或许也能满足你的需求，代码如下，你试试看：
<html>
<head>
<style>
div {
background:transparent;
width:100px;
height:100px;
cursor:pointer;
}
div:hover {
background:#0f0;
}
</style>
</head>
<body>
<div >
</div>
</body>
</html>
应该用javascript实现。style显示div是none，于是也就不会触发hover这个动作。
<style type="text/css">
.cent{background:#0CF; height:200px; width:100px;}
.cs{width:100px; height:100px; display:none; background:#F09;}
.cent:hover .cs{ display:block;}
</style>
<div class="cent">
<div class="cs">
</div>
</div>
绛旓細style鍐欏湪head鏍囩閲岄潰 div閲岄潰鍔犲嚑涓瓧锛岀湅寰楀嚭鏁堟灉 浣犲皯浜唗itle锛宮eta鏍囩锛岃繕鏈夋渶涓婇潰鐨<!DOCTYPE html>
绛旓細浣跨敤pannl鎺т欢锛屽紑濮嬪皢瀹冭涓洪殣钘忥紝鍦╞utton閲岄潰灏嗗畠鐨勫睘鎬ф敼涓哄彲鏄俱傝繖鏍峰氨涓嶇敤浣跨敤DIV浜嗭紝鏁堟灉姣擠IV瑕佸ソ鐨勫銆
绛旓細鍙互閫氳繃绔栧悜鎺掑垪鐨勬柟寮忥紝灏嗗瓙div璁剧疆涓鸿鍐呭潡鍗冲彲銆傝瘽涓嶅璇翠簡锛岀洿鎺ヤ笂浠ｇ爜锛<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div {border: solid 1px #000}#main-div {width: 200px;height: 300px;writing-mode: vertical-lr;}.item {width: ...
绛旓細3銆佸垱寤DIV鏍囩锛屽苟涓斿線閲岄潰濉厖鍐呭銆4銆佸厛璁惧畾涓涓嬫粴鍔ㄦ潯鍐呮鐨勫ぇ灏忋6銆乷verflow-y:scroll;overflow-x:scroll;鍔犱笂杩欎釜鏍峰紡婊氬姩鏉″氨浼氬嚭鐜颁簡銆俢ssp鍥哄畾涓涓猵浣杩欎釜p涓嶉殢鐫缃戦〉鐨勬粴鑰屾粴鍔紝灏辨槸鎶杩欎釜p鍥哄畾鍦ㄤ竴涓綅缃换浣曟椂鍊欓兘鍦ㄤ竴涓綅缃紵1銆侀渶瑕佷娇鐢ㄥ浐瀹氬畾浣嶆墠鑳藉仛鍒杩欐牱鐨鏁堟灉銆傚叿浣撴柟娉曟槸棣栧厛鎵...
绛旓細1銆侀鍏堬紝鎵撳紑vscode骞跺垱寤轰竴涓猦tml椤甸潰锛屽涓嬪浘鎵绀恒2銆佸叾娆★紝瀹屾垚涓婅堪姝ラ鍚庯紝鍦ㄦ祴璇曢〉鐨勫悓涓鐩綍涓坊鍔犳紨绀哄浘鐗囷紝濡備笅鍥炬墍绀恒3銆佹帴鐫锛屽畬鎴愪笂杩版楠ゅ悗锛屽湪娴嬭瘯椤典笂娣诲姞div鏍囩锛屽湪鏍囩鍐呮坊鍔爄mg鍥剧墖鏍囩锛岀劧鍚庤缃浘鐗囩殑src鍦板潃锛屽涓嬪浘鎵绀恒4銆佺劧鍚庯紝瀹屾垚涓婅堪姝ラ鍚庯紝鍦╠iv鐨勬爣绛句腑锛岀洿鎺ョ紪鍐檆ss...
绛旓細璁ヾiv涓殑div灞呬腑鍙互閫氳繃CSS鐨刴argin灞炴ф垨flexbox甯冨眬瀹炵幇銆1. 閫氳繃CSS鐨刴argin灞炴у疄鐜板眳涓 杩欐槸涓绉嶅父瑙佺殑鏂规硶锛屼富瑕侀氳繃璁剧疆宸﹀彸margin涓篴uto鏉ュ疄鐜般傞鍏堬紝缁欏唴灞傜殑div璁剧疆涓涓搴︼紝鐒跺悗灏嗗叾宸﹀彸margin璁剧疆涓篴uto锛杩欐牱娴忚鍣ㄤ細鑷姩璁＄畻宸﹀彸涓や晶鐨勭┖闂达紝浣縟iv姘村钩灞呬腑銆備緥濡傦細css .inner-div { width...
绛旓細瀹炵幇鐨鏂规硶鍜岃缁嗙殑鎿嶄綔姝ラ濡備笅锛1銆佺涓姝ワ紝濡傛灉瑕佸悜涓嬬Щ鍔div锛屽垯鍙互浣跨敤浣嶇疆灞炴ц繘琛岃皟鏁淬 鍏蜂綋鏂规硶鏄厛鎵撳紑缂栬緫鍣紝鍒涘缓涓涓柊鐨刪tml鏂囦欢锛岀劧鍚庣紪鍐欏熀鏈殑html缁撴瀯銆 鍦ㄨ繖閲岋紝璁剧疆涓や釜div骞跺垎鍒懡鍚嶅叾绫诲睘鎬arent鍜宑hild锛屽苟涓虹埗瀛恉iv璁剧疆瀹藉害鍜岄珮搴︿互鍙婁笉鍚岀殑棰滆壊锛屽涓嬪浘鎵绀猴紝鐒跺悗杩涘叆涓嬩竴...
绛旓細1銆佹墦寮Hbuilder缂栬緫鍣紝鏂板缓涓涓猦tml绌虹櫧鏂囨。锛岃緭鍏ュ熀鏈殑缁撴瀯锛岀劧鍚庢寜涓婥rtl+S淇濆瓨涓涓嬶細2銆佸垱寤轰竴涓猙utton鎸夐挳锛岀粰鎸夐挳璁剧疆涓涓猧d锛屽悕瀛楄缃负鈥渕yBT鈥濓紝鍒涘缓涓涓敤鏉ユ樉绀洪殣钘忕殑div锛屽皢鍏秈d璁剧疆涓衡渕ain鈥濓細3銆佺粰div鍜宐utton璁剧疆涓浜涙牱寮忥紝涓轰簡缇庤濂界湅锛岃繖閲屾棤闇璁剧疆display锛屽洜涓洪粯璁ゅ氨鏄樉绀虹殑锛4...
绛旓細1銆佹柊寤轰竴涓猦tml鏂囦欢锛屽垱寤轰竴涓被鍚嶄负wrap鐨div銆2銆佸厛閫氳繃css绫婚夋嫨鍣ㄩ夋嫨鍒癲iv鏉ユ帶鍒禿iv鐨勫搴﹀拰楂樺害鍜岃儗鏅鑹诧紙娌℃湁杈规鏃舵柟渚跨湅鍑烘潵div鐨勫ぇ灏忥級銆3銆侀氳繃div 鐨刡order灞炴ф帶鍒惰竟妗嗛鑹诧紝璁剧疆border鐨勫搴︿负2px锛岀嚎鍨嬩负瀹炵嚎锛岄鑹蹭负钃濊壊銆4銆杩欐牱灏卞彲浠ヨ缃甦iv杈规棰滆壊瀹藉害鍜岄珮搴︼紝濡備笅鍥撅細...
绛旓細鍙互閫氳繃js瀹炵幇涓や釜p鑷傚簲鍚岀瓑楂樺害锛屽涓锛氬厛璁剧疆p+css鍩烘湰甯冨眬锛氬乏杈 鍙宠竟 js瀹炵幇p鑷傚簲楂樺害浠ｇ爜濡備笅锛歨tml鎬庝箞灏嗚儗鏅浘涓庢祻瑙堝櫒澶у皬鑷傚簲锛熷浘鐗囪嚜閫傚簲灞忓箷澶у皬鏄剧ず涓昏鏄埄鐢ㄧ櫨鍒嗘瘮鏉ユ帶鍒讹紝鍒囧繉缁欏浘鐗囧搴︿竴涓浐瀹氬笺傚涓嬩唬鐮侊細html浠ｇ爜:p>img src="鍥剧墖鍦板潃"alt="">/p>姝ゆ椂鐨刢ss鍙互鍐欐垚:....
