CSS鼠标经过DIV换背景图的问题 CSS:鼠标经过更换背景图片 如何做到？
CSS+DIV\u5b9e\u73b0\u9f20\u6807\u7ecf\u8fc7\u80cc\u666f\u56fe\u7247\u53d8\u6362\u4f60\u8fd9\u4e2a\u6ca1\u6709\u7528\u5230css\u554a.
\u8981\u7528css\u53ef\u4ee5\u8fd9\u6837.
#div1{width:60px;}
div#div1{background:url(3.jpg) no-repeat;}
div#div1:hover{background:url(2.jpg) no-repeat;}
\u7528html
\u7684a\u6807\u7b7e\u7684hover
\u4e0b\u9762\u662f\u89e3\u91ca\u4e5f\u662f\u4e66\u5199\u987a\u5bfb
link:\u8fde\u63a5\u5e73\u5e38\u7684\u72b6\u6001
visited:\u8fde\u63a5\u88ab\u8bbf\u95ee\u8fc7\u4e4b\u540e
hover:\u9f20\u6807\u653e\u5230\u8fde\u63a5\u4e0a\u7684\u65f6\u5019
active:\u8fde\u63a5\u88ab\u6309\u4e0b\u7684\u65f6\u5019
\u8be6\u89c1\uff1a
http://www.cnblogs.com/yangfeng/archive/2009/07/25/1530962.html
使用CSS :hover 伪类可以达到这个效果。
定义和用法
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示：:hover 选择器可用于所有元素，不只是链接。
提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。
注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
实例
div{background-color:grern;}
div:hover{ background-color:yellow;}
/*当鼠标悬浮到div上方是，将背景颜色更改为黄色*/
1、背景要固定宽高
2、css要加这一句，display:block
请问你用的触发事件是onmousemove还是onmouseover,估计是用了onmousemove吧，改成onmouseover就行了
<style type="text/css">
.a1{
background:url(1.gif) no-repeat center;
width:80px;
display:block;
}
.a2{
background:url(2.gif) no-repeat center;
width:80px;
display:block;
}
</style>
</head>
<body>
<div class="a1" onmouseover="this.className='a2'" onmouseout="this.className='a1'">
liuxingyu<!--文本内容在此输入-->
</div>
</body>
用图片位移就可以了,
绛旓細<div class="d1"> div1 </div> <div class="d2" onmouseover="showbg(this)" onmouseout="hidebg(this)"> <!--鍒嗗埆璁剧疆浜榧犳爣杩涘叆銆佺寮鐨勪簨浠 --> div2 </div> </body> <script> function showbg(e){ e.style.background="url(2531170_142659950000_2.jpg)"; //鐢╦avascript鏉ユ敼鍙鑳屾櫙鍥剧墖鏍...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<style>鏍囩涓紝杈撳叆css浠ｇ爜锛div{height: 80px; background: url(small3.png)}div:hover{background: url(small2.png)}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃禿iv鏄剧ず鐨鑳屾櫙鍥剧墖鏄痵mall3.png銆4銆佸皢榧犳爣绉诲叆div锛屾鏃...
绛旓細div{background-color:grern;}div:hover{ background-color:yellow;}/*褰榧犳爣鎮诞鍒癲iv涓婃柟鏄紝灏鑳屾櫙棰滆壊鏇存敼涓洪粍鑹*/
绛旓細1銆<div class="bg" onmouseover="this.className='bg_hover'" onmouseout="this.className='bg'"></div> <style type="text/css"> .bg{ background:red; width:100px; height:50px;} .bg_hover{ background:black; width:100px; height:50px;} </style> 2銆<div class="bg" ></d...
绛旓細CSS閲岄潰娌℃湁鐐瑰嚮浜嬩欢锛屽彧鑳芥帶鍒榧犳爣绉诲叆鐨勬椂鍊欐樉绀猴紒灏忔渚嬶細<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS閲岄紶鏍囩偣鍑div閲岀殑LI A鏃跺姞涓鑳屾櫙鍥剧墖</title> <style type="text/css"> div:hover>a{background: url(img/5.jpg);} </style> </head> <body> <div> <...
绛旓細div_1 a{ background:url(img/tupian.gif) no-repeat;width:100px;height:100px;display:block;} 瀹歞iv_1涓摼鎺鑳屾櫙鏍峰紡绛 a1 a:hover,#a1 a:active{ background-position: 0px -100px;height:100px;} 瀹氫箟涓涓榧犳爣鎮仠鐘舵 </style> 鍦˙ODY涓 <div id="div_1"><ul> <li><a ...
绛旓細CSS瀹氫箟榧犳爣婊戣繃瀵艰埅鑿滃崟锛鑳屾櫙鍙互鏄疌SS瀹氫箟鐨勭函鑹诧紝涔熷彲浠ユ槸涓板瘜鑹插僵鍥炬鐨鍥剧墖锛屾枃瀛楀垯鏄疄瀹炲湪鍦ㄧ殑锛屼絾瀹冩棤娉曞仛鍒板張閰峰張鐐紝浣嗗叾浼樼偣鏄洿鍒╀簬鎼滅储浼樺寲鍜孋MS涓娇鐢ㄣ傛潵鐪嬩竴涓畝鍗曞疄渚嬶紝灏辨槸缁檃:hover(榧犳爣鎮仠)鍔犱竴涓儗鏅鑹诧紝濡備笅鍥撅細璇曚笅锛岄紶鏍囩Щ鍔ㄥ埌鈥滃鑸彍鍗曗濇枃瀛椾笂灏卞彲浠ョ湅瑙侀粍鑹茶儗鏅紝绉诲紑...
绛旓細<title>CSS瀹炵幇榧犳爣绉诲姩鍒板浘鐗囷紝鏇存崲鍥剧墖</title> 2銆佺劧鍚庤緭鍏ヤ笅鏂圭殑浠ｇ爜锛</head> <style type="text/css"> { margin:0; padding:0;} ul li{ list-style:none;} .nav{ width:800px; height:40px; margin:150px auto;} .nav ul li{ float:left; width:200px;} .nav ul li a:link...
绛旓細<a href='#'>鏍囩</a> a{ color:#000;display:block;width:100px;height:100px;background:url('a.jpg') no-repeat 0 0;} a:hover{ color:#red;background-image:#ulr('b.jpg');} 涓轰簡鍏煎浣庣増鏈殑IE6锛屽苟涓斾笉鎯崇敤JS锛岄偅涔堜綘鍙兘閫氳繃a:hover鏉ュ疄鐜般傚洜涓篒E6鍙敮鎸乤鐨刪over浼被銆
绛旓細杩欎釜瑕佹弧瓒崇殑鏉′欢 浣犲鏋滄兂榧犳爣婊戣繃灏卞彉鎹㈠浘鐗囧拰鑳屾櫙棰滆壊杩欑被鍔熻兘鐨勮瘽锛屾渶灏戣鏈変袱涓笉涓鏍风殑鍥剧墖锛屽浘鐗囪杞崲鎴愬潡绾у厓绱燿isplay:block;锛岃缃綘闇瑕佺殑瀹藉害鍜岄珮搴︼紒鏂囧瓧鐨勫ぇ灏忓彲浠ヨ缃负font-size:鍍忕礌;涓嶆噦鍙互HI鎴戝搱锛
