html 鼠标进入图片边框变色 html怎么把鼠标放在图片上的数字上会切换图片

CSS \u4e00\u5f20\u56fe\u7247\u4f5c\u4e3a\u7684\u94fe\u63a5\uff0c\u5982\u4f55\u5b9e\u73b0\u9f20\u6807\u653e\u4e0a\u53bb\u8fb9\u6846\u53d8\u8272\u7684\u6548\u679c\uff1f

\u8fb9\u6846\u5c3d\u91cf\u7528\u5728a\u4e0a\uff0c\u907f\u514d\u7528\u5728img\u4e0a\u3002 :hover\u4f2a\u7c7b\u5c3d\u91cf\u7528\u5728a\u4e0a\uff0c\u56e0\u4e3aIE6\u4e0d\u652f\u6301\u5176\u4ed6\u5143\u7d20\u7684hover\u4f2a\u7c7b\u3002hover\u610f\u601d\u5c31\u662f\u9f20\u6807\u79fb\u4e0a\u53bb\u7684\u52a8\u4f5c\u3002
\u4e0d\u77e5\u9053\u4f60\u6709\u6ca1\u6709\u7528reset\u6765\u6e05\u7406\u9875\u9762\uff0c\u6bd5\u7adf\u5404\u6d4f\u89c8\u5668\u9ed8\u8ba4\u6548\u679c\u4e0d\u4e00\uff0c\u56e0\u6b64\u6211\u628areset\u7684css\u4e5f\u5199\u4e86\u8fdb\u53bb\uff0c\u7b2c\u4e8c\u90e8\u5206\u4e3a\u4f60\u60f3\u8981\u7684css\u3002a\u6807\u7b7e\u8981\u8bbe\u5b9a\u8fb9\u6846\uff0c\u4e00\u5b9a\u8981\u5b83\u628a\u5148\u8f6c\u4e3a\u5757\u7ea7\u5143\u7d20\uff0c\u5426\u5219
\u4ed6\u7684\u9ad8\u5ea6\u4e0d\u591f\uff0c\u4ec5\u4ec5\u662f\u884c\u9ad8\u3002


/* \u6700\u7b80\u5355\u7684reset\u65b9\u5f0f*/
* {margin:0; padding:0;}
img {border:none;}
/* \u7b2c\u4e8c\u90e8\u5206 \u7ed9a\u6807\u7b7e\u5b9a\u4e49\u4e00\u4e2a\u7c7b\u540d\uff0c\u540d\u5b57\u968f\u610f\uff0c\u5c06a\u8f6c\u6362\u4e3a\u5757\u7ea7\u5143\u7d20\uff0c\u5e76\u8bbe\u5b9a\u4ed6\u7684\u5bbd\u9ad8\u548c\u56fe\u7247\u4e00\u6837\u3002*/
a.bor {display:block; width: 48px;height:64px;}
a.bor:hover {border:1px #F00 solid;}






\u539f\u7406\uff1a\u4f7f\u6240\u6709\u7684\u56fe\u7247\u9690\u85cf\u7136\u540e\u63a7\u5236\u5bf9\u5e94\u7684\u56fe\u7247\u663e\u793a\u3002\u521d\u59cb\u5316\uff1a\u73b0\u5c06\u6240\u6709\u7684\u56fe\u7247\u9690\u85cf\u63a7\u5236\u7b2c\u4e00\u5f20\u663e\u793a\u3002\uff08\u53ef\u901a\u8fc7css\u5b9e\u73b0\uff09\u3002\u8fc7\u7a0b\uff1a\u5f53\u9f20\u6807\u7ecf\u8fc7\u6570\u5b57\u7684\u65f6\u5019\uff0c\u5148\u63a7\u5236\u6240\u6709\u7684\u56fe\u7247\u5168\u90e8\u9690\u85cf\uff0c\u63a7\u5236\u6570\u5b57\u5bf9\u5e94\u7684\u56fe\u7247\u663e\u793a\u5373\u53ef\u3002
1234$("#img li").css("display","none");//\u521d\u59cb\u5316\u9690\u85cf\u5168\u90e8\u7684\u56fe\u7247$("#img li:eq(0)").css("display","block");//\u53ea\u663e\u793a\u7b2c\u4e00\u4e2a\u56fe\u7247$("#num li").mousemove(function(){//\u5f53\u9f20\u6807\u7ecf\u8fc7\u6570\u5b57$("#img li").css("display","none");//\u9690\u85cf\u5168\u90e8\u7684\u56fe\u7247 $("#img li:eq("+$(this).index()+")").css("display","block");//\u6570\u5b57\u5bf9\u5e94\u7684\u56fe\u7247\u663e\u793a });

<img src="btn_left.jpg" onmouseover="this.style.border='1px solid red'" onmouseout="this.style.border='none'" />

应该写this.style.border



扩展阅读:html设置图片圆形边框 ... html鼠标事件 更改图片 ... html鼠标经过图片放大 ... html5怎么给图片加边框 ... 图片边框怎么设置html ... html图片与边框距离 ... html鼠标悬停改变颜色 ... html鼠标悬浮图片放大 ... html鼠标悬停边框变颜色 ...

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