HTML 标签添加鼠标小手样式

1 篇文章 0 订阅
1 篇文章 0 订阅

方式一、
cursor:pointer;

cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行。 

cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。 
cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。 

结论:还是用 cursor:pointer 来的方便 

用JS使鼠标变小手onmouseover(鼠标越过的时候)
οnmοuseοver="this.style.cursor='hand'"

方式二、
 

href="javascript:void(0)"  或者 href="#"

 


cursor其他取值  
auto                    :标准光标  
default                 :标准箭头  
pointer, hand                   :手形光标  
wait                     :等待光标  
text                      :I形光标  
vertical-text          :水平I形光标  
no-drop                :不可拖动光标  
not-allowed           :无效光标  
help                     :帮助光标  
all-scroll         :三角方向标  
move                     :移动标  
crosshair           :十字标  
e-resize  
n-resize  
nw-resize  
w-resize  
s-resize  
se-resize  
sw-resize

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在鼠标选择的文本后面添加一个标签,可以使用JavaScript来实现。 首先,在Vue组件的模板中,为需要添加标签的元素添加一个 `id` 或 `class`,例如: ```html <p id="my-paragraph"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> ``` 然后,在Vue组件的JavaScript代码中,监听鼠标选择事件,并在选择结束时获取选择的文本,将其包装在标签中,并插入到选中文本的后面。例如: ```javascript const myParagraph = document.getElementById('my-paragraph'); myParagraph.addEventListener('mouseup', () => { const selection = window.getSelection().toString(); if (selection) { const newElement = document.createElement('span'); newElement.textContent = selection; newElement.style.backgroundColor = 'yellow'; const range = window.getSelection().getRangeAt(0); range.deleteContents(); range.insertNode(newElement); } }); ``` 这段代码中,我们首先通过 `getElementById()` 获取了需要添加标签的元素。然后,在 `mouseup` 事件中,我们通过 `window.getSelection().toString()` 获取了当前选中的文本。如果有选中的文本,我们创建一个新的 `span` 元素,并将选中的文本包装在其中。我们还可以设置新元素的样式,例如将背景色设为黄色。最后,我们使用 `Range` 对象将选中的文本删除,并将新元素插入到选中文本的后面。 请注意,这段代码只是一个简单的示例,实际上需要根据具体需求进行调整。此外,使用原生JavaScript操作DOM可能会影响Vue的性能和响应速度,建议在使用之前进行测试和评估。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值