CSS鼠标经过图片变亮,移开变变暗效果代码怎么写 谁给我写一段鼠标经过图片逐渐变亮，离开逐渐暗回来的jQuer...
\u8bf7\u6559\u5927\u795e\uff0cCSS\u600e\u4e48\u5b9e\u73b0\u9f20\u6807\u79fb\u81f3\u4e00\u5f20\u56fe\u7247\u65f6\uff0c\u56fe\u7247\u53d8\u4eae\uff0c\u5176\u4ed6\u56fe\u7247\u53d8\u6697\u3002\u6216\u8005\u662f\u7c7b\u4f3c\u7684\u6548\u679c\uff1f\u4f60\u8fd9\u79cd\u6548\u679c\u7eafCSS\u662f\u641e\u4e0d\u51fa\u6765\u7684\uff0c\u6211\u8fd9\u6709\u4e2a\u7c7b\u4f3c\u7684\uff0c\u4f60\u770b\u770b\u884c\u4e0d\u884c
div{ float: left; width: 180px; height: 180px; margin: 0 auto; background: url(Zombatar_1.jpg) center center no-repeat; z-index: 1;}a{ filter: alpha(opacity=80); opacity: 0.8; width: 180px; height: 180px; display: block; background: #333; z-index: 100;}a:hover{ filter: alpha(opacity=0); opacity: 0;}ie7\uff0c8\uff0c9\u6d4b\u8bd5\u901a\u8fc7\uff0c\u8c37\u6b4c\u6d4b\u8bd5\u901a\u8fc7\uff0c\u5176\u4f59\u7684\u6d4f\u89c8\u5668\u6ca1\u6d4b
$('img').hover(function(){
$(this).stop(true).animate({opacity:0.8},300)
},function(){
$(this).stop(true).animate({opacity:1},300)
})
1、打开hbuilder，在空白的html文件上面设置一个div，给div一个class并命名为img：
2、在css里设置img的类一定的宽和高，引入示例图片，设置图片为不重复。并且给img的类设置“:hover”伪类，设置伪类内的透明度为0.6：
3、打开浏览器，在浏览器内查看效果：
4、将鼠标移入图片，就会发现图片已经变亮了。以上就是用CSS设置鼠标经过图片变亮，移开变变暗效果的演示：
原理就是制作两套样式，分别运用在鼠标放上和拿开的时候，比如楼下的同学说的：
img {opacity:0.8;filter(alpha=80)}
img:hover {opacity:1;filter(alpha=100)}但是用透明度的方法似乎没有变亮，变暗的效果。
建议可以在图片上加一个层来控制：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>JS Bin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
#tabbox{ width: 300px; height: 300px; position: relative;}
.imgbg{width: 300px; height: 300px; top: 0; left: 0; position: absolute; background: #000; opacity:0;filter(alpha=0)}
.imgbg:hover{ opacity:0.5;filter(alpha=50)}
</style>
</head>
<body>
<div id="tabbox">
<img src="/6rooms/html/img/1.jpg" alt="">
<div class="imgbg"></div>
</div>
</body>
</html>
希望能帮到你！
加hover的CSS即可。
img {opacity:0.8;;filter(alpha=80)}
img:hover {opacity:1;filter(alpha=100)}
img:hover {
opacity:0.7;
filter:alpha(opacity=70);
}
绛旓細1銆佹墦寮hbuilder锛屽湪绌虹櫧鐨刪tml鏂囦欢涓婇潰璁剧疆涓涓猟iv锛岀粰div涓涓猚lass骞跺懡鍚嶄负img锛2銆佸湪css閲岃缃甶mg鐨勭被涓瀹氱殑瀹藉拰楂橈紝寮曞叆绀轰緥鍥剧墖锛璁剧疆鍥剧墖涓轰笉閲嶅銆傚苟涓旂粰img鐨勭被璁剧疆鈥:hover鈥濅吉绫伙紝璁剧疆浼被鍐呯殑閫忔槑搴︿负0.6锛3銆佹墦寮娴忚鍣紝鍦ㄦ祻瑙堝櫒鍐呮煡鐪嬫晥鏋滐細4銆佸皢榧犳爣绉鍏ュ浘鐗囷紝灏变細鍙戠幇鍥剧墖宸茬粡鍙樹寒浜嗐
绛旓細2銆佸湪css閲岃缃甶mg鐨勭被涓瀹氱殑瀹藉拰楂橈紝寮曞叆绀轰緥鍥剧墖锛岃缃浘鐗囦负涓嶉噸澶嶃傚苟涓旂粰img鐨勭被璁剧疆鈥:hover鈥濅吉绫伙紝璁剧疆浼被鍐呯殑閫忔槑搴︿负0.6銆3銆佹墦寮娴忚鍣紝鍦ㄦ祻瑙堝櫒鍐呮煡鐪嬫晥鏋溿4銆佸皢榧犳爣绉鍏ュ浘鐗囷紝灏变細鍙戠幇鍥剧墖宸茬粡鍙樹寒浜嗐備互涓婂氨鏄敤CSS璁剧疆榧犳爣缁忚繃鍥剧墖鍙樹寒锛岀Щ寮鍙樺彉鏆楁晥鏋滅殑婕旂ず銆
绛旓細浣犺繖绉嶆晥鏋滅函CSS鏄悶涓嶅嚭鏉ョ殑锛屾垜杩欐湁涓被浼肩殑锛屼綘鐪嬬湅琛屼笉琛 div{ float: left; width: 180px; height: 180px; margin: 0 auto; background: url(Zombatar_1.jpg) center center no-repeat; z-index: 1;}a{ filter: alpha(opacity=80); opacity: 0.8; wid...
绛旓細浣犲ソ锛鍙互浣跨敤css鐨:hover浼被瀹炵幇銆傚笇鏈涘浣犳湁甯姪锛
绛旓細},function(){ })濡傛灉鏄節寮犻兘瑕佹湁鏁堟灉 ("img").each(function () { (this).hover(function () { var src = $(this).attr("src");var newsrc = src.split(".")[0] + "-1." + src.split(".")[1];//鎷兼帴浣犺嚜宸卞畾涔鍥剧墖鍙栧悕瑙勫垯 (this).attr("src",newsrc);}, function ...
绛旓細7)鍦ㄥ仛缃戦〉鏃跺父鐢ㄥ埌鎶榧犳爣鏀惧湪鍥剧墖涓婁細鍑虹幇鍥剧墖鍙樹寒鐨勬晥鏋,鍙互鐢ㄥ浘鐗囨浛鎹㈢殑鎶宸,涔熷彲浠ョ敤濡備笅鐨勬护闀:.pictures img {filter: alpha(opacity=45); }.pictures a:hover img {filter: alpha(opacity=90); }8)灞傚湪娴忚鍣ㄤ腑灞呬腑瀵归綈闂body { text-align: center }#content { text-align: left; width: ...
绛旓細1銆慶ss鏂瑰紡 .btn:hover{ /*璋冪敤css3鍔ㄧ敾鎴栬呭彲浠ラ棯鐑佺殑gif*/ } 2銆慾s鏂瑰紡 $().hover(function(){ //榧犳爣杩涘叆浜嬩欢 },function(){ //榧犳爣绉鍑轰簨浠 }) css浠ｇ爜鍔ㄧ敾鎵ц鍚庡浣曟秷澶? css浠ｇ爜鍔ㄧ敾鎵ц鍚庤缃洿鎺ユ坊鍔燼nimation-fill-mode:forwards,璁ヽss鐨勫姩鐢绘墽琛屽悗鍋滅暀鍦ㄦ渶鍚庝竴甯с 寮哄ぇ鍒╃敤JS搴旂敤鐨凧avascript缃...
绛旓細杩欐槸鐢╦s鍔css銆乨iv鎺у埗鐨勶紝瀹冨叾瀹炲垎涓轰袱寮犻鑹蹭笉涓鏍风殑鏄熸槦鍥剧墖锛涓寮犳湁棰滆壊锛堜寒锛夌殑锛屼竴寮犵伆鑹叉垨鑰呮殫涓鐐圭殑棰滆壊锛堜笉浜級鐨勶紝褰榧犳爣婊戣繃鎴栬呯偣鍑绘椂浼氳Е鍔ㄤ竴涓紶鏍囦簨浠讹紝鏇存崲鍥剧墖锛岀敱鏆楄壊鍥剧墖鎹负鏈夐鑹茬殑鍥剧墖锛屽氨鏄綘鐪嬪埌鐨勬槦鏄熶細浜殑鏁堟灉锛屼綘鍙互涓婄綉涓嬭浇涓涓洖鏉ヨ嚜宸变慨鏀广 涓滆帪姹囬懌 ...
绛旓細鍐欎竴鐐CSS鏍峰紡蹇呰鏃剁敤涓妀s锛屽仛鍒颁互涓嬶細1銆2涓猻teel涓巔roduct鍒嗗睘涓嶅悓鐨勬爣绛惧潡 2銆佹湭琚榧犳爣婵娲绘椂锛宲roduct鐨勬牱寮忎负鏃犺竟绾匡紝鍙湁鏂囧瓧鏄剧ず銆俿teel涓嶆樉绀轰笉鍗犳嵁绌洪棿(display:none)3銆佸綋琚紶鏍囨縺娲婚珮浜甴over鏄剧ず鏃讹紝product鐨勬牱寮忓彉涓:涓娿佸乏銆佸彸涓夐潰鏈夎竟绾匡紝鑰屽簳杈规棤杈圭嚎銆備笖Z杞撮珮浜庡叾浣欑殑Resource绛夊潡銆俿...
绛旓細鏈夊嚑绉嶆柟娉曪細1.鏀瑰彉鎸夐挳鐨刴ousepointer鎴栬卪ouseicon灞炴 2.鍦ㄦ寜閽殑MouseMove浜嬩欢涓敼鍙樻寜閽殑BackColor锛屽悓鏃惰鎶婃寜閽殑style璁剧疆涓1 3.鐢ㄨ繖涓狪mage鎺т欢锛屾坊鍔犳寜閽鍥剧墖锛鐢ㄨ繖涓簨浠禡ouseMove鏀瑰彉鍥剧墖 4.鐢ㄧ涓夋柟鎺т欢 濡傛灉鏄鍑虹幇榛勮壊杈规閭ｇ锛屽彧鑳界敤绗3,4绉嶆柟娉曚簡 ...
