用CSS做的网页的伪类问题，假如3个图片排成一行，怎样才能使鼠标悬浮在其中一个图片上这个图片就有边框呢 css有用伪类弄了个下拉图片，要加什么鼠标在图上图片不消失。
css\u7684\u4f2a\u7c7bbefore\u7684\u95ee\u9898\u3000\u3000\u4e00 \u57fa\u672c\u8bed\u6cd5
\u3000\u3000\u5e73\u5e38\u4ec5\u4ec5\u9700\u8981\u5c06\u8fd9\u4e24\u4e2a\u4f2a\u5143\u7d20\u7528\u4e8e\u6dfb\u52a0\u4e00\u4e9b\u81ea\u5b9a\u4e49\u5b57\u7b26\u65f6\uff0c\u53ea\u9700\u4f7f\u7528\u4f2a\u7c7b\u4f7f\u7528\u7684\u5355\u5192\u53f7\u5199\u6cd5\uff0c\u4ee5\u4fdd\u8bc1\u6d4f\u89c8\u5668\u7684\u517c\u5bb9\u6027\uff1a
\u3000\u3000p:before {}
\u3000\u3000
\u3000\u3000\u4e0d\u8fc7\uff0c\u5728 CSS3 \u4e2d\u4e3a\u4e86\u533a\u522b\u4f2a\u5143\u7d20\u548c\u4f2a\u7c7b\u4e3a\u4f2a\u5143\u7d20\u4f7f\u7528\u4e86\u53cc\u5192\u53f7\uff0c\u56e0\u6b64\u5982\u679c\u4f7f\u7528\u4e86 display \u6216\u8005 width \u7b49\u5c5e\u6027\u65f6\u4f7f\u5f97\u663e\u793a\u8131\u79bb\u4e86\u539f\u672c\u5143\u7d20\u540e\uff0c\u5efa\u8bae\u6309\u7167\u6807\u51c6\u53cc\u5199\u3002\u8fc7\u4e8e\u8001\u7684\u6d4f\u89c8\u5668\u53ef\u80fd\u4f1a\u5b58\u5728\u652f\u6301\u95ee\u9898\uff0c\u4e0d\u8fc7\u4f2a\u5143\u7d20\u5927\u591a\u662f\u914d\u5408 CSS3 \u4f7f\u7528\uff0c\u5c31\u65e0\u6240\u8c13\u5411\u4e0b\u517c\u5bb9\u4e86\uff1a
\u3000\u3000img::after {}
\u3000\u3000
\u3000\u3000\u8fd9\u4e24\u4e2a\u4f2a\u7c7b\u4e0b\u7279\u6709\u7684\u5c5e\u6027 content \uff0c\u7528\u4e8e\u5728 CSS \u6e32\u67d3\u4e2d\u5411\u5143\u7d20\u903b\u8f91\u4e0a\u7684\u5934\u90e8\u6216\u5c3e\u90e8\u6dfb\u52a0\u5185\u5bb9\u3002\u6ce8\u610f\u8fd9\u4e9b\u6dfb\u52a0\u4e0d\u4f1a\u6539\u53d8\u6587\u6863\u5185\u5bb9\uff0c\u4e0d\u4f1a\u51fa\u73b0\u5728 DOM \u4e2d\uff0c\u4e0d\u53ef\u590d\u5236\uff0c\u4ec5\u4ec5\u662f\u5728 CSS \u6e32\u67d3\u5c42\u52a0\u5165\u3002\u6bd4\u8f83\u6709\u7528\u7684\u662f\u4ee5\u4e0b\u51e0\u4e2a\u503c\uff1a
\u3000\u3000[String] - \u4f7f\u7528\u5f15\u53f7\u5305\u62ec\u4e00\u6bb5\u5b57\u7b26\u4e32\uff0c\u5c06\u4f1a\u5411\u5143\u7d20\u5185\u5bb9\u4e2d\u6dfb\u52a0\u5b57\u7b26\u4e32\u3002\u793a\u4f8b\uff1a
\u3000\u3000a:after { content: "\u2197"; }
\u3000\u3000
\u3000\u3000attr() \u2013 \u8c03\u7528\u5f53\u524d\u5143\u7d20\u7684\u5c5e\u6027\uff0c\u53ef\u4ee5\u65b9\u4fbf\u7684\u6bd4\u5982\u5c06\u56fe\u7247\u7684 Alt \u63d0\u793a\u6587\u5b57\u6216\u8005\u94fe\u63a5\u7684 Href \u5730\u5740\u663e\u793a\u51fa\u6765\u3002\u793a\u4f8b\uff1a
\u3000\u3000a:after { content:"(" attr(href) ")"; }
\u3000\u3000
\u3000\u3000url() / uri() \u2013 \u7528\u4e8e\u5f15\u7528\u5a92\u4f53\u6587\u4ef6\u3002\u793a\u4f8b\uff1a
\u3000\u3000h1::before { content: url(logo.png); }
\u3000\u3000
\u3000\u3000counter() \u2013 \u8c03\u7528\u8ba1\u6570\u5668\uff0c\u53ef\u4ee5\u4e0d\u4f7f\u7528\u5217\u8868\u5143\u7d20\u5b9e\u73b0\u5e8f\u53f7\u529f\u80fd\u3002\u5177\u4f53\u8bf7\u53c2\u89c1 counter-increment \u548c counter-reset \u5c5e\u6027\u7684\u7528\u6cd5\u3002\u793a\u4f8b\uff1a
\u3000\u3000h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
\u3000\u3000
\u3000\u3000\u4e8c \u8fdb\u9636\u6280\u5de7
\u3000\u3000\u6e05\u9664\u6d6e\u52a8\u662f\u4e00\u4e2a\u65f6\u5e38\u4f1a\u9047\u5230\u7684\u95ee\u9898\uff0c\u4e0d\u5c11\u4eba\u7684\u89e3\u51b3\u529e\u6cd5\u662f\u6dfb\u52a0\u4e00\u4e2a\u7a7a\u7684 div \u5e94\u7528 clear:both; \u5c5e\u6027\u3002\u73b0\u5728\uff0c\u65e0\u9700\u589e\u52a0\u6ca1\u6709\u610f\u4e49\u7684\u5143\u7d20\uff0c\u4ec5\u9700\u8981\u4ee5\u4e0b\u6837\u5f0f\u5373\u53ef\u5728\u5143\u7d20\u5c3e\u90e8\u81ea\u52a8\u6e05\u9664\u6d6e\u52a8\uff1a
\u3000\u3000.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }
\u3000\u3000
\u3000\u3000\u8bb8\u591a\u4eba\u559c\u6b22\u7ed9 blockquote \u5f15\u7528\u6bb5\u6dfb\u52a0\u5de8\u5927\u7684\u5f15\u53f7\u4f5c\u4e3a\u80cc\u666f\uff0c\u8fd9\u79cd\u65f6\u5019\u6211\u4eec\u5c31\u53ef\u4ee5\u7528 :before \u6765\u4ee3\u66ff background \u4e86\uff0c\u5373\u53ef\u4ee5\u7ed9\u80cc\u666f\u7559\u4e0b\u7a7a\u95f4\uff0c\u8fd8\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u6587\u5b57\u800c\u975e\u56fe\u7247\uff1a
\u3000\u3000blockquote::before {
content: open-quote;
position: absolute;
z-index: -1;
color: #DDD;
font-size: 120px;
font-family: serif;
font-weight: bolder;
}
\u3000\u3000
\u3000\u3000\u4e09 \u7279\u6548\u5999\u7528
\u3000\u3000\u9664\u4e86\u7b80\u5355\u7684\u6dfb\u52a0\u5b57\u7b26\uff0c\u914d\u5408 CSS \u5f3a\u5927\u7684\u5b9a\u4f4d\u548c\u7279\u6548\u7279\u6027\uff0c\u5b8c\u5168\u53ef\u4ee5\u8fbe\u5230\u7ed9\u7b80\u5355\u7684\u5143\u7d20\u53e6\u5916\u9644\u52a0\u6700\u591a\u4e24\u4e2a\u5bb9\u5668\u7684\u6548\u679c\u3002\u6709\u4e00\u70b9\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u5982\u679c\u4e0d\u9700\u8981\u5185\u5bb9\u4ec5\u914d\u5408\u6837\u5f0f\u5c5e\u6027\u505a\u51fa\u6548\u679c\uff0c\u5185\u5bb9\u5c5e\u6027\u4e5f\u4e0d\u80fd\u4e3a\u7a7a\uff0c\u5373 content:\u201d" \u3002\u5426\u5219\uff0c\u5176\u4ed6\u7684\u6837\u5f0f\u5c5e\u6027\u4e00\u6982\u4e0d\u4f1a\u751f\u6548\u3002
\u3000\u3000\u60ac\u6d6e\u51fa\u73b0\u65b9\u62ec\u53f7
\u3000\u3000\u9f20\u6807\u79fb\u4e0a\u94fe\u63a5\uff0c\u51fa\u73b0\u65b9\u62ec\u53f7\uff1a
\u3000\u3000a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
\u3000\u3000
\u3000\u3000\u540c\u6837\uff0c\u6211\u4eec\u53ea\u9700\u8981\u914d\u5408 display: block \u548c position: absolute \uff0c\u5c31\u53ef\u4ee5\u5c06\u5176\u5f53\u6210\u4e24\u4e2a\u5bb9\u5668\uff0c\u62fc\u5408\u6210\u60ac\u6d6e\u51fa\u73b0\u53cc\u8fb9\u6846\u7684\u7279\u6548\uff1a
\u3000\u3000a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 0 10px;
}
/* \u5927\u6846 */
a:hover::before, a:hover::after {
content: "";
display: block;
position: absolute;
top: -15%%;
left: -14%%;
width: 120%;
height: 120%;
border-style: solid;
border-width: 4px;
border-color: #DDD;
}
/* \u5c0f\u6846 */
a:hover::after {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-width: 2px;
}
\u3000\u3000
\u4f60\u53bb\u770b\u4e00\u4e0bCSS3 \u6211\u53ef\u4ee5\u544a\u8bc9\u4f60\u5c31\u662ftransition \u548c hover\u5c31OK\u4e86 transition\u63a7\u5236\u52a8\u753b\u65f6\u95f4 \u7136\u540ehover\u6539\u53d8DIV\u7684\u9ad8\u5ea6 \u518d\u6765\u4e2aoverflow:hidden\u5c31\u641e\u5b9a\u4e86\u5457
img也是可以做伪类属性的，如img：hover。至于你说的鼠标放上去之后全部都有边框，这个你把代码晒出来看看才知道。初步判断a标签加错了。给图片外部容器加上border：value d/s color; 外容器选择器例如.div:hover{ border：value d/s color; }颜色根据自己的需求改动就可以了~
你把每个图片用<a><img></a>这样包起来,然后定义一个a:hover的伪类是有边框的,就行了
绛旓細浣跨敤a:visited {color : pink;}璁剧疆宸茶闂繃鐨勯摼鎺ワ紝褰椤甸潰宸茬粡鍦ㄦ祻瑙堝櫒鎵撳紑骞剁偣鍑婚摼鎺ュ悗锛屾樉绀虹殑渚挎槸璁块棶杩囩殑鏁堟灉锛屽涓嬪浘鎵绀恒傚鏋滄兂瑕佽繕鍘熸垚鏈闂箣鍓嶇殑鐘舵侊紝閲嶆柊鎵撳紑椤甸潰鏄笉琛岀殑锛岄渶瑕佹竻闄ゆ祻瑙堝櫒鐨勭紦瀛樻墠鍙備娇鐢╝:hover {color : yellow;}璁剧疆榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂鏄剧ず鐨勬晥鏋滐紝褰撻紶鏍囨樉绀轰负鎵嬪瀷...
绛旓細浼被鍦CSS涓壆婕旂潃闈炲父閲嶈鐨勮鑹诧紝瀹冭兘甯姪寮鍙戣呮洿绮剧‘鍦版帶鍒椤甸潰鐨浜や簰鐘舵佸拰琛屼负銆傛瘮濡傚湪涓涓鑸彍鍗曚腑锛岀敤鎴锋偓鍋滃湪鑿滃崟椤逛笂鏃舵洿鏀硅儗鏅壊銆侀鑹叉垨鏄剧ず棰濆淇℃伅绛夋彁绀猴紝鎻愬崌鐢ㄦ埛浣撻獙锛涘悓鏃跺湪浣跨敤琛ㄥ崟鏃讹紝涔熻兘瀵硅幏鍙栫劍鐐规垨琚縺娲荤殑鍏冪礌杩涜鏍峰紡鐨勮皟鏁淬傝繖浜涢兘鏄氳繃浼被瀹炵幇鐨勩傚父瑙鐨勪吉绫杩樺寘鎷渇irst-...
绛旓細鍦CSS涓锛屼吉绫鍜屼吉鍏冪礌閮芥槸涓轰簡鍦ㄧ壒瀹氭儏鍐典笅涓哄厓绱犳坊鍔犻澶栫殑鏍峰紡锛屼絾瀹冧滑鐨勫師鐞嗗拰浣跨敤鍦烘櫙鏈夋墍涓嶅悓銆傞鍏堬紝鎴戜滑鏉ユ帰璁ㄤ吉绫汇備吉绫绘槸鍦ㄩ夋嫨鍣ㄥ悗闈㈡坊鍔犵殑涓涓壒娈婃爣璇嗭紝瀹冧滑鎻忚堪鐨勬槸鍏冪礌鐨勭壒瀹氱姸鎬侊紝渚嬪:hover锛堥紶鏍囨偓鍋滄椂锛夈:active锛堝厓绱犺婵娲绘椂锛夌瓑銆備吉绫讳富瑕佺敤浜庡姩鎬佸湴鏀瑰彉鍏冪礌鐨勫瑙傦紝浠ュ搷搴旂敤鎴风殑浜...
绛旓細浼被锛坧seudo-class锛夋槸 CSS 閫夋嫨鍣ㄧ殑涓绉嶇壒娈婄被鍨嬶紝瀹冨厑璁镐綘鏍规嵁鍏冪礌鐨勭姸鎬佹垨浣嶇疆鏉ュ簲鐢ㄧ壒瀹氭牱寮忥紝鑰屾棤闇涓哄厓绱犳坊鍔犻澶栫殑 class 鎴 id銆備吉绫讳互鍐掑彿锛:锛夊紑澶达紝鍚庤窡浼被鍚嶇О銆傝秴閾炬帴浼被鏄簲鐢ㄤ簬 HTML 閾炬帴鍏冪礌锛堥氬父鏄 鏍囩锛夌殑涓缁 CSS 浼被銆傛湁鍥涚甯哥敤鐨勮秴閾炬帴浼被褰㈡侊細:link - 鏈闂殑閾炬帴銆
绛旓細CSS浼被鎸囩殑鏄敤浜庨夋嫨缃戦〉鏂囨。涓煇浜涚壒瀹氱姸鎬佹垨浣嶇疆鐨勯夋嫨鍣ㄣ傛瘮濡:hover浼被鐢ㄤ簬閫夋嫨鐢ㄦ埛鎮仠鍦ㄦ煇涓厓绱犱笂鐨勭姸鎬侊紝:active浼被鐢ㄤ簬閫夋嫨鐢ㄦ埛鍦ㄧ偣鍑绘煇涓厓绱犳椂鐨勭姸鎬併浣跨敤浼被鍙互浣挎枃妗ｇ殑鏍峰紡鏇村姞鐏垫椿澶氬彉锛屼娇寰缃戦〉鐨浜や簰鏁堟灉鏇村姞鐢熷姩銆備吉绫荤殑浣跨敤甯稿父鍜孞avaScript绛夎剼鏈瑷鐩哥粨鍚堛傞氳繃鍦ㄤ吉绫讳腑璋冪敤JavaScript...
绛旓細CSS浼被鐢ㄤ簬鍚戠壒娈婄姸鎬佺殑閫夋嫨鍣ㄦ坊鍔犵壒娈婃晥鏋锛屼娇鐢鏈澶鐨勪吉绫鏄敋浼被銆俛:link鏈闂殑閾炬帴 a:visited宸茶闂殑閾炬帴 a:hover榧犳爣绉诲姩鍒伴摼鎺ヤ笂,姝や吉绫讳笉姝㈤檺浜庤秴閾炬帴涓婏紝鍏朵粬鍏冪礌涔熷彲浣跨敤 a:active閫夊畾鐨勯摼鎺 娉ㄦ剰锛氬湪 CSS 瀹氫箟涓紝a:hover 蹇呴』琚疆浜 a:link 鍜 a:visited 涔嬪悗锛屾墠鏄湁鏁堢殑锛沘:...
绛旓細img涔熸槸鍙互鍋氫吉绫灞炴х殑锛屽img锛歨over銆傝嚦浜庝綘璇寸殑榧犳爣鏀句笂鍘讳箣鍚庡叏閮ㄩ兘鏈夎竟妗嗭紝杩欎釜浣犳妸浠ｇ爜鏅掑嚭鏉ョ湅鐪嬫墠鐭ラ亾銆傚垵姝ュ垽鏂璦鏍囩鍔犻敊浜嗐
绛旓細css鏍峰紡涓渶甯哥敤鐨勫洓涓浼被閫夋嫨鍣ㄥ垎鍒槸锛1. `:hover`锛氳繖涓吉绫婚夋嫨鍣ㄧ敤浜庨夋嫨榧犳爣鎸囬拡鎮仠鍦ㄤ笂闈㈢殑鍏冪礌銆備緥濡傦紝濡傛灉浣犳湁涓涓摼鎺ワ紝褰撲綘鎶婇紶鏍囨寚閽堟偓鍋滃湪閾炬帴涓婃椂锛岄摼鎺ョ殑棰滆壊鍙兘浼氭敼鍙樸備緥濡傦紝濡傛灉浣犳湁涓涓摼鎺ワ紝褰撲綘鎶婇紶鏍囨寚閽堟偓鍋滃湪閾炬帴涓婃椂锛岄摼鎺ョ殑棰滆壊鍙兘浼氭敼鍙樸2. `:active`锛氳繖涓吉绫婚夋嫨...
绛旓細浼被涓寮濮嬪崟鍗曞彧鏄敤鏉ヨ〃绀轰竴浜涘厓绱犵殑鍔ㄦ佺姸鎬侊紝鍏稿瀷鐨勫氨鏄摼鎺ョ殑鍚勪釜鐘舵(LVHA)銆傞殢鍚CSS2鏍囧噯鎵╁睍浜嗗叾姒傚康鑼冨洿锛屼娇鍏舵垚涓轰簡鎵鏈夐昏緫涓婂瓨鍦ㄤ絾鍦ㄦ枃妗ｆ爲涓嵈鏃犻』鏍囪瘑鐨勨滃菇鐏碘濆垎绫汇備吉鍏冪礌鍒欎唬琛ㄤ簡鏌愪釜鍏冪礌鐨勫瓙鍏冪礌锛岃繖涓瓙鍏冪礌铏界劧鍦ㄩ昏緫涓婂瓨鍦紝浣嗗嵈骞朵笉瀹為檯瀛樺湪浜庢枃妗ｆ爲涓備吉绫婚夋嫨鍏冪礌鍩轰簬鐨勬槸褰撳墠...
绛旓細浼被涓寮濮嬪崟鍗曞彧鏄敤鏉ヨ〃绀轰竴浜涘厓绱犵殑鍔ㄦ佺姸鎬侊紝鍏稿瀷鐨勫氨鏄摼鎺ョ殑鍚勪釜鐘舵(lvha)銆傞殢鍚css2鏍囧噯鎵╁睍浜嗗叾姒傚康鑼冨洿锛屼娇鍏舵垚涓轰簡鎵鏈夐昏緫涓婂瓨鍦ㄤ絾鍦ㄦ枃妗ｆ爲涓嵈鏃犻』鏍囪瘑鐨勨滃菇鐏碘濆垎绫汇備吉鍏冪礌鍒欎唬琛ㄤ簡鏌愪釜鍏冪礌鐨勫瓙鍏冪礌锛岃繖涓瓙鍏冪礌铏界劧鍦ㄩ昏緫涓婂瓨鍦紝浣嗗嵈骞朵笉瀹為檯瀛樺湪浜庢枃妗ｆ爲涓備吉绫婚夋嫨鍏冪礌鍩轰簬鐨勬槸褰撳墠...
