材料/工具：css
1、打开前端开发软件，新建一个html代码页面
2、在新建的html代码页面上找到<body>,在这个<body>标签里创建一个标签，a案例中使用的是<a>。
代码：
<a href="">
大家好，鼠标放到我身上就可看到效果
</a>
3、为新家<a>添加鼠标指针为手指样式。在html代码页面中找到<tilte>,在这个<title>后面创建一个<style>，然后在<style>中新建一个样式类，最后为这个样式类添加鼠标指针样式。
代码：
<style type="text/css">
.pointer{
cursor: pointer
}
</style>
4、把鼠标指针样式添加到<a>标签上。
添加后的代码：
<a href="" class="pointer">
大家好，鼠标放到我身上就可看到效果
</a>
5、保存html代码后使用浏览器打开，当鼠标滑过<a>上的文字后即可看到鼠标变为了指针状态。可以直接复制以下代码到新建的html文件上，粘贴保存后使用浏览器打开即可看到效果。
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css设置鼠标指针</title>
<style type="text/css">
.pointer{
cursor: pointer
}
</style>
</head>
<body>
<a href="" class="pointer">
大家好，鼠标放到我身上就可看到效果
</a>
</body>
</html>
以下仅作为参考：在线所见即所得HTML编辑器的实现原理浅析
这篇文章主要介绍了在线所见即所得HTML编辑器的实现原理浅析,本文用初始化、打开编辑功能、获取编辑器的内容、增加样式设置、再进一步等步骤阐述在线编辑器的基本实现原理,需要的朋友可以参考下
如今网站开发越来越提倡用户体验，为用户提供便利的工具也越来越多，而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制，例如文字的颜色、字体大小等而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多，但是真正好用的并不多，所以它们改进工作也一直在进行中。
如今网上多数的编辑器都有很强大的功能，相对而言，在使用中也需要很多的配置，当然代码也自然会比较“臃肿”。如果我们并不需要功能那么强大的编辑器，那么可以自己实现一个，因为代码并不复杂。下面是一点个人的经验，仅供参考(以ExtJS的HTMLEditor为例)。
1、初始化。当页面加载完毕后，向页面添加一个IFrame(可选)。这里要注意的是，要判断页面的状态，要等页面完全加载完毕后再进行操作，防止出现找不到某些元素的错误。在site:https：//www.moxue.store中也出现过类似问题。
2、打开编辑功能。将IFrame设为可以编辑(下面代码来自ExtJS的HTMLEditor)：
代码如下:
// 获取iframe的window对象
getWin : function(){
return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name]
},
//获取iframe的document对象
getDoc : function(){
return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document)
},
//打开document对象，向其写入初始化内容，以兼容FireFox
doc = this.getDoc()
doc.open()
doc.write(' ')
//打开document对象编辑模式
doc.designMode = "on"
doc.close()
这样就可以向这个简单那的编辑器中写入内容了。
3、获取编辑器的内容，代码如下：
复制代码 代码如下:
//获取编辑器的body对象
var body = doc.body || doc.documentElement
//获取编辑器的内容
var content = body.innerHTML
//对内容进行处理，例如替换其中的某些特殊字符等等
//Some code
//返回内容
return content
4、增加样式设置。上面的编辑器虽然实现了基本功能，但是实在是有些太简单了，应该增加些简单的样式实现。document的execCommand方法使这种想法成为可能。
代码如下:
//统一的执行命令方法
function execCmd(cmd, value){
//doc对象的获取参照上面的代码
//调用execCommand方法执行命令
doc.execCommand(cmd, false, value === undefined ? null : value)
}
//将选中字体变为黑体，Ctrl-B
execCmd('bold')
//加下划线，Ctrl-U
execCmd('underline')
//变为斜体，Ctrl-I
execCmd('italic')
//设置文字的颜色
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color)
//在光标处插入一段内容
function insertAtCursor(text){
//win对象的获取参考上面的代码
if(Ext.isIE){
win.focus()
var r = doc.selection.createRange()
if(r){
r.collapse(true)
r.pasteHTML(text)}
}else if(Ext.isGecko || Ext.isOpera){
win.focus()
execCmd('InsertHTML', text)
}else if(Ext.isSafari){
execCmd('InsertText', text)
}
}
5、再进一步。如今可以改变样式了，如果编辑器有工具栏(这应该是必然的)，那么我们还想工具栏上的按钮根据光标所处位置的样式，自动处于突出或正常显示。document的queryCommandState()方法又让这种想法得以实现。
代码如下:
//doc对象的获取参考上面的对面
//光标处是否是粗体
var isBold = doc.queryCommandState('bold')
if(isBold){
//改变Bold按钮的样式
}
//当然上面的代码是可以合并的，这里只不过是一个示意
//下划线
doc.queryCommandState('underline')
//斜体
doc.queryCommandState('italic')
本文只是为实现编辑器提供了简单的思路，其中的一些代码是可以直接使用的。建议，想自己实现编辑器的朋友可以参考下ExtJS中的HTMLEditor代码，既简单又比较清晰，可以在其上进行扩展。
最后提醒一点：一定要注意浏览器的兼容性问题，并且不要等接近尾声了再去测试兼容性，对于这么大量的JavaScript代码，调整是比较痛苦的事情。
html中有一个标签，直接给文字添加一个a标签 ；\x0d\x0a比如：\x0d\x0a关于我们\x0d\x0aa标签默认的鼠标放上去就是一个手指的样式，或者你也可以用cursor: pointer这个给他设置一下，cursor还有其他的属性可以使用
