请问用CSS设置背景透明之后还能让鼠标经过时改变背景色吗?(经过时背景无所谓透不透明) css样式鼠标经过后背景颜色和字体颜色改变

\u5982\u4f55\u7528js\u6216\u8005css\u5b9e\u73b0\uff0c\u9f20\u6807\u7ecf\u8fc7\u7684\u65f6\u5019\u80cc\u666f\u8272\u53d8\u5316\uff0c\u505c\u7559\u5728\u8fd9\u9875\u65f6\uff0c\u80cc\u666f\u8272\u8fd8\u662f\u53d8\u5316\u540e\u7684\u989c\u8272

\u7528hover\uff0c\u6bd4\u5982\u4f60\u8981div\u67d0\u4e2adiv\u80cc\u666f\u53d8\u8272\uff0c\u7528 \u7c7b\u540d\uff1ahover{background:#ff6a00;} \u6216\u8005\u662f id\uff1ahover{background:#ff6a00;} \u8fd9\u6837\u5c31\u884c\u4e86\uff0c\u9f20\u6807\u653e\u5f00\u80cc\u666f\u8272\u5c31\u81ea\u52a8\u53d8\u5316\u56de\u53bb\u4e86\u3002

\u4f8b\u5982\uff1a
\u6807\u7b7e

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');
}

\u4e3a\u4e86\u517c\u5bb9\u4f4e\u7248\u672c\u7684IE6\uff0c\u5e76\u4e14\u4e0d\u60f3\u7528JS\uff0c\u90a3\u4e48\u4f60\u53ea\u80fd\u901a\u8fc7a:hover\u6765\u5b9e\u73b0\u3002\u56e0\u4e3aIE6\u53ea\u652f\u6301a\u7684hover\u4f2a\u7c7b\u3002

不是js的问题,是css优先级问题,ID的优先级比class的优先级高,而且你用了important,再而且css是后面的覆盖前面的!

所以你后面的check样式被覆盖了,解决办法可以是这样声明你的check

#p1.check{
    background-color:red !important;/*因为之前声明的背景色有这个important标识所以这里要加上,保证优先级高于#p1*/
}

或者,重新声明你的p1 给他加上个class .p1 把给#p1的样式加给.p1

.p1{
     height:18px;
     float:left; 
     padding:2px 4px 2px 4px; 
     margin-left:5px;
     cursor:pointer;
     background:rgba(170, 150, 174, 0.5) none repeat scroll 0 0 !important;
     filter:Alpha(opacity=80); background:#fff;
}
.check{
     background-color:red !important;
}

 这是你上面描述的,我觉得1L说的也对啊,你直接用#p1:hover{background:red;}不就达到你的效果了吗,写这么多行要起到的作用不就和这一行一样吗...你还有别的想法我就不知道了。



可以 直接
.test:hover{backgound:#ccc;}
就可以在鼠标经过的时候test样式的块背景色发生改变
无视我吧 我只是赚积分的

  • 璇烽棶鐢–SS璁剧疆鑳屾櫙閫忔槑涔嬪悗杩樿兘璁╅紶鏍囩粡杩囨椂鏀瑰彉鑳屾櫙鑹...
    绛旓細涓嶆槸js鐨勯棶棰橈紝鏄css浼樺厛绾ч棶棰橈紝ID鐨勪紭鍏堢骇姣攃lass鐨勪紭鍏堢骇楂橈紝鑰屼笖浣犵敤浜唅mportant锛屽啀鑰屼笖css鏄鍚庨潰鐨勮鐩栧墠闈㈢殑锛佹墍浠ヤ綘鍚庨潰鐨刢heck鏍峰紡琚鐩栦簡锛岃В鍐冲姙娉曞彲浠ユ槸杩欐牱澹版槑浣犵殑check p1.check{ background-color:red !important;/*鍥犱负涔嬪墠澹版槑鐨鑳屾櫙鑹叉湁杩欎釜important鏍囪瘑鎵浠ヨ繖閲岃鍔犱笂锛屼繚璇佷紭鍏...
  • 鍦css褰撲腑浣跨敤opacity:0.5;灞炴璁剧疆浜閫忔槑鑳屾櫙,涔嬪悗涓婇潰鐨勫瓧璁剧疆鐧借壊涓...
    绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠g爜锛歞iv {opacity:0.5;background-color: #0b93d5} span {color: white;} 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔熷湪閫忔槑搴50%鐨鑳屾櫙涓婃樉绀轰簡鐧借壊鐨勬枃瀛椼
  • CSS鑳屾櫙鑹閫忔槑浣嗗唴瀹逛笉閫忔槑鎬庝箞瀹炵幇?
    绛旓細璁剧疆涔嬪悗鍙互鐪嬪埌锛鑳屾櫙鑹插彉鎴愪簡鍗閫忔槑鐨勬晥鏋滐紝鑰屾垜浠殑鏂囧瓧鍐呭鏄笉閫忔槑鐨勩備互涓婃柟娉曠敤鐫绠鍗曪紝浣嗘槸涓嶅吋瀹筰e8浠ヤ笅鐨勬祻瑙堝櫒銆傛垜浠渶瑕佹坊鍔犱竴涓狪E婊ら暅灏卞彲浠ヨВ鍐冲吋瀹规ч棶棰樹簡銆傚涓嬪浘鎵绀猴紝鎴戜滑闇瑕佹坊鍔 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F273c7d,endColorstr=#7F273c7d)...
  • 鎬庢牱鐢╟ss浠g爜鎶婁竴灏忓揩鐨鑳屾櫙閫忔槑,鐒跺悗杩樹綅浜庢渶涓婂眰!璇锋暀浠g爜銆傘傘俖鐧...
    绛旓細鎮ㄧ殑鎰忔濇槸鎶妔idebar.png杩欏紶鍥剧墖閫忔槑鍚楋紵png鏍煎紡鐨勫浘鐗囨湰韬氨鍙互璁剧疆閫忔槑搴︾殑锛岀敤鍥剧墖缂栬緫宸ュ叿锛堟瘮濡侾hotoshop锛夌紪杈戜笅鍗冲彲銆傝嫢瑕侀氳繃浠g爜鐨勮瘽锛屽彲浠ラ氳繃"opacity:0.5;"锛0-1涔嬮棿璋冩暣锛1涓哄畬鍏ㄤ笉閫忔槑锛夋潵璋冩暣閫忔槑搴︼紝浣嗘槸涓浜涙祻瑙堝櫒涓嶆敮鎸佽璇彞銆傝繕鏈夛紝浣犵洰鍓嶇殑浠g爜涓嚭鐜颁簡涓ゅtop锛屼负绮剧畝css锛屽缓璁...
  • 鎴鐢╟ss 涓殑opacity 璁剧疆鍏冪礌鑳屾櫙鐨閫忔槑搴 鍚鍙戠幇璇ュ厓绱犵殑鍐呭閫忔槑搴︿篃...
    绛旓細鐢ㄤ袱涓眰閲嶅彔锛屼竴涓枃瀛楋紝涓涓浘鐗囷紝鍏朵腑涓涓眰璁剧疆濂絧osition 鍥惧浘鍥惧浘鍥 瀛 瑕佺偣锛歰verflow:hidden;position: relative;margin-top:-200px;娉ㄦ剰鍚勫鍣ㄧ殑楂樺
  • css鑳屾櫙鑹插崐閫忔槑鍚,寮瑰嚭涓涓獥鍙,鎬庝箞浣胯儗鏅壊鍗婇忔槑瑕嗙洊鏁翠釜缃戦〉_鐧惧害...
    绛旓細浣跨敤css鍒涘缓锛氬皢杩欎釜闇瑕佽鐩栧叏閮ㄩ〉闈㈢殑鍗閫忔槑瀹瑰櫒鐩稿涓庢枃妗g粷瀵瑰畾浣嶏紝鐒跺悗璁剧疆鍏跺搴﹂珮搴﹀潎涓哄潎涓100%鍗冲彲锛岀己鐐规槸瀹瑰櫒鎬绘槸瑕嗙洊褰撳墠鐘舵佷笅娴忚鍣ㄨ鍙g殑闈㈢Н锛屽鏋滄鏃惰皟鏁存祻瑙堝櫒瀹藉害鎴栭珮搴︿负鏇村ぇ鍊煎垯鍑虹幇闈炶鐩栧尯銆侸avaScript鍒涘缓锛氬厛鐢╟ss杩涜閫忔槑灞傚畾浣嶏紝鍚屼笂.鐒跺悗浣跨敤bom璇彞鑾峰彇褰撳墠瑙嗗彛鐨勫搴﹀拰楂樺害鐒跺悗...
  • css鎬庝箞鍙互鍙鑳屾櫙閫忔槑 鏂囧瓧涓嶉忔槑
    绛旓細1銆侀鍏堟柊寤轰竴涓猦tml鏂囦欢锛屾坊鍔犱竴涓狣IV锛璁剧疆瀹藉害鍜岄珮搴︼紝浠ュ強鑳屾櫙鑹插~鍏呬负绾㈣壊銆2銆佺劧鍚庡湪鐖剁骇DIV涓彃鍏ヤ竴涓瓙DIV锛屽畾涔夊畠鐨勫楂橈紝浠ュ強鑳屾櫙鑹诧紙background锛#fff;锛夈3銆佺劧鍚庢坊鍔犱竴涓閫忔槑搴︾殑浠g爜锛坥pacity:0.6锛,淇濆瓨鍚庨瑙堜笅鏁堟灉锛岃儗鏅凡缁忓疄鐜伴忔槑浜嗭紝浣嗘槸鏂囧瓧涔熼忔槑浜嗐4銆佺啛鎮塒S鐨勫悓瀛﹀簲璇ラ兘...
  • CSS鎬庝箞璁剧疆璁鑳屾櫙棰滆壊閫忔槑,鑰屾枃瀛椾笉閫忔槑
    绛旓細娴忚鍣ㄣ乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html锛岀紪鍐欓棶棰樺熀纭浠g爜銆2銆佸湪index.html涓殑鏍囩涓紝瀵光渁rticle鈥濇坊鍔犳牱寮忥細opacity: 0.5;锛屽鈥渁rticle p鈥濇坊鍔犳牱寮忥細opacity: 1;銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鑳屾櫙鏄50%閫忔槑搴︼紝浣嗗瓧浣撴槸涓嶉忔槑鐨勩
  • css鐖堕泦璁剧疆閫忔槑 閲岄潰鐨勫唴瀹逛篃閫忔槑鎬庝箞瑙e喅?
    绛旓細css鏄眰鍙犳牱寮忚〃锛屾牱寮忎細榛樿缁ф壙锛屽鏋滄兂璁╁瓙绾у拰鐖剁骇鐨勬牱寮忎笉涓鏍凤紝鍙互鐩存帴璁剧疆瀛愮骇锛屽儚浣犵殑闂锛屽氨璁剧疆涓嶅笇鏈閫忔槑鐨勫瓙绾т负涓嶉忔槑鍗冲彲銆
  • CSS涓璁剧疆浜嗗浘鐗閫忔槑搴︽庝箞涓嶈捣浣滅敤鍛
    绛旓細涓銆佷笉璧蜂綔鐢ㄧ殑鍘熷洜锛1銆佸啓娉曢敊璇2銆佹祻瑙堝櫒涓嶅吋瀹广備簩銆css涓纭殑鍥剧墖閫忔槑搴﹀啓娉曪細渚嬶細鍘熷浘锛歝ss涓姞閫忔槑搴﹀啓娉曪細img{opacity:0.4;filter:alpha(opacity=40); /* 閽堝 IE8 浠ュ強鏇存棭鐨勭増鏈 */ } 杩欐牱鍥剧墖鏄剧ず涓猴細璇存槑锛欼E9, Firefox, Chrome, Opera 鍜 Safari 浣跨敤灞炴 opacity 鏉璁惧畾閫...
  • 扩展阅读:css设置div背景半透明 ... html设置背景图透明度 ... css设置背景色半透明 ... html背景图片透明淡化 ... css背景透明文字不透明 ... 怎么设置div背景为透明 ... 秀米背景图透明度怎么设置 ... 开启颜色背景的透明效果 ... 怎么让背景变透明css ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网