css在div上添加背景图片，div:hover时要求添加背景颜色并移出背景图。怎么做？ div:hover 添加的背景 在某一个位置怎么添加超链接
DIV\u8bbe\u7f6e\u4e86\u80cc\u666f\u56fe\u7247\uff0c\u5982\u4f55\u7528CSS\u6539\u53d8\u5176\u989c\u8272\uff1fjq\u53ef\u4ee5\u5b9e\u73b0 \u7ed9\u4f60\u7684DIV \u8bbe\u7f6e\u4e2aid \u540d\u5b57\u662fid
$(document).ready(function(){
$('#id').click(function(){
$('img').css("filter","gray")
})
})
\u53ef\u4ee5\u5728\u6807\u7b7e\u91cc\u52a0\u4e2ahref\u5199\u4e0a\u94fe\u63a5\u5730\u5740\u5c31\u884c\u4e86
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div:hover{background:red;background-image:none;}
div{display:block;background: url(images/caterCreate.jpg) left center no-repeat;width:400px;height:400px;}
</style>
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
});
</script>
</head>
<body>
<div>
</div>
</html>
效果图如下：
不要谢我，我叫雷哄
绛旓細css浠ｇ爜娣诲姞鑳屾櫙鍥剧墖锛1锛庤儗鏅鑹诧細background-color 璇硶锛歿background-color:鏁板紏 娉ㄦ剰锛氬湪html褰撲腑锛岃涓烘煇涓璞″姞涓婅儗鏅壊鍙湁涓绉嶅姙娉曪紝閭ｅ氨鏄厛鍋氫竴涓〃鏍硷紝鍦ㄨ〃鏍涓璁剧疆瀹岃儗鏅壊锛屽啀鎶婂璞℃斁杩涘崟鍏冩牸銆傝繖鏍峰仛姣旇緝楹荤儲锛屼笉浣嗕唬鐮佽緝澶氾紝杩樿涓鸿〃鏍肩殑澶у皬鍜屽畾浣嶄激浜涜剳绛嬨傝〃鏍艰儗褰遍鑹诧細style="...
绛旓細3銆佸鏋12閮芥病鏈夐敊锛屽灞DIV鑳屾櫙鏍峰紡瑕嗙洊锛屽彲鑳戒綘杩欎釜灞傛槸宓屽灞傦紝澶栭潰鐖跺眰鏈夊叾浠栫殑鑳屾櫙鍥鏍峰紡閬綇浜嗭紝璇蜂粩缁嗘鏌ョ埗灞傛垨鑰呭叏灞鑳屾櫙鏍峰紡銆4銆佸鏋123閮芥病鏈夐敊锛岃妫鏌ヤ竴涓嬫槸鍚﹁瀹瑰櫒鏄惁琚澶勫畾涔夋牱寮忥紝閫犳垚鏍峰紡鍐茬獊銆傜敤浣犵殑瀹瑰櫒鍚 鎴栬匢D鍚 鍦CSS鏂囦欢閲岄潰妫绱竴涓嬨傛瘮濡備綘杩欎釜鑳屾櫙鏄缃湪.class涓 ...
绛旓細http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>liuxing test</title><style type="text/css"> .divbgpic{ background-image:url('jquery/jquery-ui-1.9.1.custom/jquery-ui-1.9.1.custom/css/base/images...
绛旓細搴旇鏄繖绉嶆儏鍐靛惂锛屼綘瀹氫箟鐨div鏈夌粰鍑哄浐瀹氱殑瀹藉害鍜岄珮搴︽病锛岃杩2鑰呴兘缁欏嚭鏉ワ紱杩欐槸div閲岄潰娌′笢瑗跨殑鏃跺欙紝杩欐牱鎵嶈兘鏄剧ず鑳屾櫙鍥剧墖锛涘鏋DIV閲岄潰鏈変笢瑗匡紝閭ｈ鎶婁唬鐮佺矘璐村嚭鏉ャ
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<style>鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv{height: 80px; background: url(small3.png)}div:hover{background: url(small2.png)}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃禿iv鏄剧ず鐨鑳屾櫙鍥剧墖鏄痵mall3.png銆4銆佸皢榧犳爣绉诲叆div锛姝ゆ椂...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<style>鏍囩涓紝杈撳叆css浠ｇ爜锛歜ody {background: url(image.jpg) no-repeat;background-size: 100%}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔熻瀹鑳屾櫙鍥剧墖绛夋瘮渚嬫斁缂╁埌...
绛旓細background:url(top.jpg) center top no-repeat,url(bottom.jpg) center bottom no-repeat;涓嶈繃鍥犱负涓嶅悓娴忚鍣ㄥ浜CSS3鐨勬敮鎸佸害鏈夐檺锛岃繖绉嶅啓娉曞湪澶у鏁版祻瑙堝櫒閲岄潰锛岀壒鍒槸IE閲岄潰鏄棤鏁堢殑銆傛墍浠ラ氬父鐨勪綔娉曡繕鏄祵濂椾袱涓div锛屼竴涓猟iv閲岄潰鏄涓婇潰鐨鑳屾櫙鍥撅紝涓涓猟iv閲岄潰鏄笅闈㈢殑鑳屾櫙鍥撅紝杩欐牱鐨勫吋瀹规т細濂戒竴浜...
绛旓細center no-repeat;width:400px;height:400px;}</style><script type="text/javascript" src="../assets/js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ });</script></head><body><div></div></html>鏁堟灉鍥惧涓嬶細涓嶈璋㈡垜锛屾垜鍙浄鍝 ...
绛旓細绗竴锛岃矾寰勯敊浜嗭紝绗簩锛屼綘鐨DIV娌℃湁楂樺害鎴栬呮病鏈夊唴瀹箏~~鑳屾櫙棰滆壊娓愬彉鍙互閫氳繃浠ｇ爜鏉ュ疄鐜帮紝鍏蜂綋鐨勪細姣旇緝绻佺悙锛屽吋瀹逛篃涓嶅ソ锛屼絾鏄敤鍥剧墖鏉ュ仛娓愬彉灏辩畝鍗曠編瑙傦紝鎵浠ユ笎鍙樼殑鍑犱箮娌′汉鐢ㄤ唬鐮佷簡锛岃冭檻涓嬬敤鍥剧墖鍚
绛旓細div{ background:url(images/banner.gif) -20px -20px no-repeat;} url(images/banner.gif)锛氬鍏鑳屾櫙鍥锛-20px -20px 锛氫綘闇瑕佺殑閭ｅ潡鑳屾櫙鍥剧殑鍧愭爣,杩欎釜鍧愭爣鏄粠宸︿笂瑙掑紑濮嬭绠楃殑锛屽苟涓斿湪璁剧疆杩欎釜鍙傛暟鏃跺畠涓鸿礋鏁帮紙杩欎釜涓哄暐瀛愭垜涓鸿礋鏁帮紝鎴戜篃涓嶅お娓呮锛夛紱姣斿鎴戠幇鍦ㄤ晶寰楀緱鍧愭爣鏄細x杞达細20 ...
