jquery元素悬停效果 JS+CSS实现悬停在A元素，达到改变B元素样式的效果
jquery \u9f20\u6807\u7ecf\u8fc7\u4e8b\u4ef6\u6539\u53d8display\u5143\u7d20$(function(){ $(".icon_upload").hover(function(){ $("#upload_box").show(); },function(){ $("#upload_box").hide(); });});
\u4f60\u597d\uff0c\u6309\u7167\u4f60\u7684\u8981\u6c42\u548c\u4ee3\u7801\uff0c\u6211\u5199\u4e86\u4e00\u4e2a\u8303\u4f8b\uff0c\u8bf7\u53c2\u8003\uff1a
\u65b0\u95fb\u8d44\u8baf \u65b0\u95fb\u8d44\u8baf \u65b0\u95fb\u8d44\u8baf \u65b0\u95fb\u8d44\u8baf //\u60ac\u505c\u5728\u5b50\u5217\u8868\u4e0a\u9762\u65f6\u6539\u53d8\u9876\u5217\u8868\u7684\u80cc\u666f document.getElementById('c1').onmouseover = function(){ document.getElementById('p1').style.background = "#f00"; } //\u9f20\u6807\u79bb\u5f00\u5b50\u5217\u8868\u65f6\u6062\u590d\u9876\u5217\u8868\u7684\u80cc\u666f document.getElementById('c1').onmouseout = function(){ document.getElementById('p1').style.background = "#fff"; }\u8fd0\u884c\u6548\u679c1\uff1a\u9f20\u6807\u60ac\u505c\u5728\u5b50\u5217\u8868\u4e0a\u65f6
\u8fd0\u884c\u6548\u679c2\uff1a\u9f20\u6807\u79bb\u5f00\u5b50\u5217\u8868\u65f6
\u5982\u6709\u7591\u60d1\uff0c\u6b22\u8fce\u8ffd\u95ee\u3002
<style type="text/css">
*{ margin:0; padding:0;}
ul{ overflow:auto; position:relative; z-index:2; top:1px;}/*通过top:1px,使li覆盖div一个像素*/
li{ float:left; list-style:none; margin:0 10px;}
#div1{ width: 150px; height:100px; background:#ccc; display:none; position:relative; z-index:1;}
</style>
<script type="text/javascript">
$(function(){
$("li,#div1").hover(
function(){
$("#div1").show();
},
function(){
$("#div1").hide();
}
);
})
</script>
</head>
<body>
<ul id="ul1">
<li><a href="#">list1</a></li>
<li><a href="#">list2</a></li>
<li><a href="#">list3</a></li>
</ul>
<div id="div1"></div>
</body>
</html>
$(document).ready(function(){
$("#div1").css("display","none");
$("#ul1 li").mouseover(function(){
$("#div1").show('slow');
});
$("#ul1 li").mouseout(function(){
$("#div1").hide('slow');
});
$("#div1").mouseover(function(){
$("#div1").css("display","block");
})
绛旓細榧犳爣绂诲紑li鍏冪礌锛岀Щ鍒癲iv涓奷iv涓嶆秷澶便傝繖涓繕瑕佺粨鍚坈ss,閫氳繃鐩稿瀹氫綅锛堢粷瀵逛篃琛岋級锛屽埄鐢ㄤ粬浠殑灞傚彔鎬-index锛屼娇div鍦╨i涓嬮潰銆 { margin:0; padding:0;} ul{ overflow:auto; position:relative; z-index:2; top:1px;}/*閫氳繃top:1px,浣縧i瑕嗙洊div涓涓儚绱*/ li{ float:left; list-style:none;...
绛旓細600,function(){ sp2.css("marginRight","10px").show(); me.width("300px"); });}).mouseout(function(){ var me = $(this); me.stop().animate
绛旓細鍥炵瓟锛歝ss("color","#ff9501"); 杩欏彞涓棿鏄啋鍙,涓嶆槸閫楀彿 鏍囩偣閿欎簡,鎵浠ヨВ鏋愪笉鍑烘潵,鏀逛负: css("color":"#ff9501");
绛旓細("#id").hover(function(){ //缂栬緫涓嬫媺鍒楄〃 });
绛旓細鍙互鐢╦query鐨勯紶鏍囨偓鍋滀簨浠 mouseover锛鍗抽紶鏍囧仠鐣欏湪鏌愪釜dom鍏冪礌瑙﹀彂锛屽湪杩欎釜浜嬩欢閲岄潰锛屽姩鎬佹敼鍙樿彍鍗曠殑css灏卞ソ浜锛涘搴旂殑mouseout鏄紶鏍囩Щ寮浜嬩欢
绛旓細('li').hover(function(){ //浣犺鏄剧ず鐨勫眰锛宒iv鏀惧埌li閲岄潰銆傞粯璁ss灞炴ф槸闅愯棌 $(this).find('div').show();},function(){ //浣犺鏄剧ず鐨勫垪琛ㄥ舰寮 $(this).css({'list-style-type':'decimal', 'display':'block'}).find('div').hide();});涓嶇煡閬撴槸涓嶆槸杩欐牱?
绛旓細jquery缁欐墍鏈夌殑鍥剧墖鎵鍦╠iv鍔犱笂榧犳爣鎮仠浜嬩欢锛岀劧鍚庡緱鍒伴紶鏍囨墍鍦╠iv锛堝彲浠ラ氳繃class/id锛鍏冪礌锛屽啀淇敼div鐨刢ss鏍峰紡锛岄殣钘忓氨鏄痙isplay:none銆
绛旓細jquery缁欐墍鏈夌殑鍥剧墖鎵鍦╠iv鍔犱笂榧犳爣鎮仠浜嬩欢锛岀劧鍚庡緱鍒伴紶鏍囨墍鍦╠iv锛堝彲浠ラ氳繃class/id锛鍏冪礌锛屽啀淇敼div鐨刢ss鏍峰紡锛岄殣钘忓氨鏄痙isplay:none銆
绛旓細浣犺繖涓敤鐨勬槸css3鐨勫睘鎬э紝涓嶈兘閫氳繃js鎺у埗锛岃鎯抽氳繃js鎺у埗灏辨妸杩欓噷鍘绘帀鏀圭敤jquery鐨animate鍑芥暟鍚
绛旓細onmouseover=function(){ timer=setTimeout('alert("ok")',2000);} onmouseout=function(){clearTimeout(timer);}
