====== html5鼠标样式 ======
===== css实现 =====
利用cursor属性\\
比如说''cursor: url(https://sinriv.com/img/mouse_hover.ico),auto;''\\
一个完整的例子:\\
button:hover{
cursor: url(https://sinriv.com/img/mouse_hover.ico),auto;
}
body,label,div,nav,section,footer,time,span,h1,h2,h3,h4,h5{
cursor: url(https://sinriv.com/img/mouse.ico),auto;
}
textarea{
cursor: url(https://sinriv.com/img/mouse_edit.ico),auto;
}
a:hover{
cursor: url(https://sinriv.com/img/mouse_hover.ico),auto;
}
.mouse-selected,.mouse-selected>*{
cursor: url(https://sinriv.com/img/mouse_hover.ico),auto;
}
input[type="text"]{
cursor: url(https://sinriv.com/img/mouse_edit.ico),auto;
}
input[type="button"]{
cursor: url(https://sinriv.com/img/mouse_hover.ico),auto;
}
===== js实现 =====
很简单,四行代码\\
首先先获取元素
var e=document.getElementById("div");
然后设置样式
e.onmouseover = function(){
this.style.cursor = 'pointer';
}
如果我们希望直接使用自己图片(必须ico格式)作为鼠标形状,可以在script中添加url地址。
e.onmouseover = function(){
this.style.cursor = 'url(cur.ico),auto';
}
如果想在整个网页打开后默认鼠标样式可以直接在body中“onload="document.body.style.cursor='crosshair'",crosshair可以换成pointer、move或者url图片等鼠标样式。