当鼠标移动到div或者超链接只上时,显示相应的鼠标形状

在HTML中很多情况都会要求我们当鼠标移动上去的时候显示相应的形状出来,要么是手型或者箭头这种之类的。

下面我就以超链接为例子,给大家介绍一下怎么实现这一过程。

其实特别简单只要给组件添加相应的样式就可以实现这样的效果了。这种样式叫做cursor属性

下面给出例子代码:




    
    


CSS鼠标手型效果

CSS鼠标手型效果

CSS鼠标十字型效果

CSS鼠标问号效果

是移动到文本上的那种效果

是等待的那种效果

是默认效果

是向右的箭头

是向右上的箭头

是向上的箭头

是向左上的箭头

是向左的箭头

是左下的箭头

是向下的箭头

是向右下的箭头

是由系统自动给出效果

运行的效果大家可以自己去试一下,非常简单。

这里需要注意的是:style=“cursor:hand”这个样式只要加在相应的组件上面就可以实现相应的鼠标形状功能了。

例如:放在div上面就可以这么写:

这样就可以实现鼠标移动到div上面的时候出现手型了。

还有几点需要注意的是:

一:style=“cursor:hand”,style=“cursor:pointer”这两个虽然都是手型,可以style=“cursor:pointer”的兼容性比style=“cursor:hand”要好,所以如果要使用手型的话推荐大家使用style=“cursor:pointer”这种方式来实现。

二:style=“cursor:auto”这个样式的形状和浏览器有关系,Google,火狐,IE可能出来的形状都不大一样。

三:那些带有上下箭头的形状,经过本人测试其实都一样,因为是双向箭头,所以没有箭头朝向的区别。但是这也有可能是浏览器的缘故,因为我只测试过Google,火狐,IE这三个浏览器。

如博客内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534



 
  
 
  

你可能感兴趣的:(当鼠标移动到div或者超链接只上时,显示相应的鼠标形状)