html鼠标放上去显示黑框怎么弄 网页上鼠标移上去就显示边框 代码是什么 如图
HTML\u5f53\u9f20\u6807\u653e\u4e0a\u53bb\u65f6\u51fa\u73b0\u8fb9\u6846\u5728\u6837\u5f0f\u4e0a\u5199
li:hover{border:1px solid #ddd}
\u4e0d\u8fc7\u8fd9\u6837\u7684\u4f2a\u7c7b\uff0cie6\u30017\u4e0d\u652f\u6301\u3002
\u82e5\u8981\u517c\u5bb9\u6027\uff0c\u53ea\u6709\u901a\u8fc7js\u53bb\u5199\u3002\u4f8b\u5982\uff1a
\u5148\u5b9a\u4e49\u4e00\u4e2a\u6837\u5f0f\u540d\u662f\u5e26\u8fb9\u6846\u7684
.hover{border:1px solid #ddd}
\u5f53\u9f20\u6807\u653e\u5728
\u4f46\u662f\u8fd9\u6837\u975e\u5e38\u9ebb\u70e6\uff0c\u56e0\u4e3a\u6bcf\u4e2ali\u90fd\u8981\u5199\u3002\u6240\u4ee5\u8fd8\u6709\u66f4\u597d\u7684\u505a\u6cd5\u3002
\u5f53\u9f20\u6807\u653e\u5728\u4e0a\u65f6\u5468\u8fb9\u51fa\u73b0\u8fb9\u6846
\u5f53\u9f20\u6807\u653e\u5728\u4e0a\u65f6\u5468\u8fb9\u51fa\u73b0\u8fb9\u6846
\u5f53\u9f20\u6807\u653e\u5728\u4e0a\u65f6\u5468\u8fb9\u51fa\u73b0\u8fb9\u6846
\u5f53\u9f20\u6807\u653e\u5728\u4e0a\u65f6\u5468\u8fb9\u51fa\u73b0\u8fb9\u6846
var aa=document.getElementById("rank").getElementsByTagName("li");
for(var i=0;i<aa.length;i++){
aa[i].onmouseover=function(){
this.className=this.className+" hover";
}
aa[i].onmouseout=function(){
var cn=this.className;
this.className=cn.replace(" hover","");
}
}
\u7eaf\u624b\u6253\uff0c\u671b\u91c7\u7eb3\u3002
\u5219 :hover \u65e0\u6548 -->
\u7b80\u6d01Tab
.out { border:1px solid blue; width:200px; height:200px; }
.in { border:1px solid red; width:200px; height:200px; }
.outClass{ display:block; border:1px solid blue; width:200px; height:200px; }
.outClass:hover { border:1px solid red; }
这个只要将元素样式的hover伪类设置边框即可。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.div-style1
{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.div-style2
{
width: 200px;
height: 200px;
background-color: darkgray;
float: left;
margin-left: 20px;
}
.div-style1:hover
{
width: 200px;
height: 200px;
background-color: red;
border: 5px solid black;
}
.div-style2:hover
{
width: 200px;
height: 200px;
background-color: darkgray;
-webkit-box-shadow: 0 0 8px black;
-moz-box-shadow: 0 0 8px black;
box-shadow: 0 0 8px black;
}
</style>
<meta charset="UTF-8">
<title>标题一</title>
</head>
<body>
<div class="div-style1">
移上去显示黑框
</div>
<div class="div-style2">
移上去显示阴影
</div>
</body>
</html>
以上就是鼠标移动到元素上显示黑框的一个实例。做了两个效果，一个是边框，一个是阴影。
设置你那个DIV对应的背景颜色就行了，参考如下， 鼠标经过用 :hover表示
a:hover{background:#000;}
1：直接采用：hover ：移上去背景和文字白色即可。
2：onmouseover 和onmouseout也可以，但是hover简单好用，很适合。jq的toggle也行。
3：我已经说得很清楚，不懂的我可以直接给你上代码。
绛旓細<html> <head> <title>test</title> <style> body {font-size:12px;background:#9EC7E7} </style> <script type="text/javascript"> function news(type){ for(i=1;i<=5;i++){ if(i==type){ document.getElementById(type).style.display="block";}else{ document.getElementById(i...
绛旓細杩欎簺灞炰簬鍙偣鍑荤殑瓒呴摼鎺 鍙互閲囩敤a鏍囩瀹炵幇 榧犳爣鏀句笂鍘绘樉绀洪粦妗闇瑕乧ss3鐨勮秴閾炬帴浼被 浣跨敤:hover鍗冲彲杈惧埌鏁堟灉
绛旓細璁剧疆杈规棰滆壊鏃惰璁剧疆border-color,杩樿璁剧疆border-style
绛旓細<style> .img:hover{border:1px solid red}</style><img src="姝ゅ杈撳叆鍥剧墖鍦板潃" class="img" />
绛旓細璁剧疆a:hover鐨刢ss鏍峰紡灏卞彲浠ヤ簡鍛锛屽氨鏄敼鍙榓鐨勮儗鏅浘鐗囷紝杩欎釜鏄渶绠鍗曠殑銆傚綋鐒朵篃鍙互鏀瑰彉涓嶉忔槑搴
绛旓細<style type="text/css"> a{ float:left; width:80px; background-color: #F2F4EF; text-align:center; padding:8px 0px 6px 0px; font-size:14px; text-decoration: none; color: #62b366; line-height: 120%; } a.tip{ color: #3300FF; background-color: #ffffcc; border: 1px...
绛旓細1銆佸湪蹇熷惎鍔ㄦ爮涓偣鍑诲眰鍙犳牱寮忚〃鎸夐挳(灏辨槸鎶榧犳爣鏀句笂鍘绘樉绀showcssstyles鐨勯偅涓寜閽)锛屽湪寮瑰嚭鐨凜SSStyles闈㈡澘涓婂弻鍑(none)銆2銆佹鏃讹紝鍙湅鍒板脊鍑虹殑EditStyleSheet闈㈡澘锛屽湪璇ラ潰鏉夸笂鎸塏ew鎸夐挳銆3銆佸脊鍑虹殑NewStyle闈㈡澘涓婄偣鍙朢edefineHTMLTag(閲嶆柊瀹氫箟HTML鏍囪)鍐嶅湪Tag涓夋嫨a(瓒呯骇閾炬帴鏍囪)鏍囪鍚庢寜OK鎸夐挳銆4...
绛旓細鍥犱负浣犲鏌ュ厓绱犵殑鏃跺欙紝杩欎釜涓嬫媺妗嗙殑鐘舵佹槸闅愯棌鐨勶紝鎵浠ヤ綘鐪嬩笉鍒般傝嚦浜庡疄鐜扮殑鏂规硶锛屽氨鏄粰鍥剧墖缁戝畾涓涓猦over浜嬩欢锛屽綋榧犳爣绉诲埌鍥剧墖涓婃椂锛屽氨灏嗕笅鎷妗嗘樉绀鍑烘潵銆
绛旓細鏂规硶涓锛榧犳爣绉昏嚦鍥剧墖涓婃樉绀閬僵灞傚強鏂囧瓧 1銆佸厛鐪嬩笅html锛屼竴涓猧mg鍥剧墖鎺т欢锛屽拰涓涓湁mask鏍峰紡鐨刣iv锛岄噷闈㈡湁鏂囧瓧锛岃繖涓氨鏄伄缃╁眰銆2銆佺劧鍚庣湅涓嬫牱寮忓畾涔夛紝鍏堢湅涓嬪浘鐗囧鍣ㄥ拰鍥剧墖鐨勬牱寮忥紝濡傚浘锛屽叾涓娉ㄦ剰鐨勬槸img_container鏍峰紡閲屽畾涔変簡position:relative;杩欎釜涓昏鏄负浜嗚鎴戜滑鐨勯伄缃╁眰鍋氱粷瀵瑰畾浣嶅仛鍑嗗鐨勩...
绛旓細<img src="btn_left.jpg" onmouseover="this.style.border='1px solid red'" onmouseout="this.style.border='none'" />搴旇鍐檛his.style.border
