我正在开发一个需要具有正常光标功能的应用程序,但是当单击按钮时,如果有意义的话,会将光标功能转换为其他功能。
例如,我希望在用户单击“选择元素”按钮之前拥有常规光标功能,此时光标将开始突出显示用户悬停的元素。我已经涵盖了整个突出显示功能,但我不确定如何切换光标以开始突出显示或不突出显示。
另一个例子,在用户单击“绘图”按钮之前,我将拥有常规光标功能,此时光标将变为选取框工具或其他东西并能够在页面上绘图。我不是在问如何在页面上绘制,而只是通过切换使光标在页面上绘制。
您可以使用 jQuery 将类添加到可悬停项目的父容器中。
然后你只需要在对象的悬停上做一些 CSS 以新类为父类。
这里是基本 html 的示例:
<div class="section">
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
</div>
<a href='#'>Toggle hover</a>
和 jQuery :
$('a').click(function(){
$('.section').hasClass('hoverable') ? $('.section').removeClass('hoverable') : $('.section').addClass('hoverable')
})
它检查悬停是否处于活动状态,如果没有,则使其处于活动状态,否则将删除该类。
然后css看起来像这样:
.object{
width: 100px;
height : 100px;
margin :40px;
background-color:blue;
}
.hoverable .object:hover{
background-color : yellow;
cursor : pointer;
}
我为你做了一个小提琴:http: //jsfiddle.net/7jB3W/
你可以为你的绘图caneva做同样的事情!