html实现鼠标悬停变成手型实现方式

1、采用a标签实现的方式

1 <a href="javascript:void()">内容</a>

2、采用CSS实现的方式

1 // 变手形
2 oElement.style.cursor = "pointer";
3
4 // 恢复原样
5 oElement.style.cursor = "default";

或者

1 <div style="cursor:hand">
2
3 <img style="cursor:hand">
4
5 <td style="cursor:hand">

css写法:

1   <style>
2        a.hand:hover   {cursor:hand}
3   </style>   

cursor其他取值

 1   auto                     :标准光标
 2   default               :标准箭头
 3   hand                     :手形光标
 4   wait                     :等待光标
 5   text                     :I形光标
 6   vertical-text   :水平I形光标
 7   no-drop               :不可拖动光标
 8   not-allowed       :无效光标
 9   help                     :?帮助光标
10   all-scroll         :三角方向标
11   move                     :移动标
12   crosshair           :十字标
13   e-resize
14   n-resize
15   nw-resize
16   w-resize
17   s-resize
18   se-resize
19   sw-resize   
时间: 2024-11-06 11:13:09

html实现鼠标悬停变成手型实现方式的相关文章

【VR】Leap Motion 官网文档 手型资源

前言: Leap Motion的官网文档已经有不少的热心网友参与了翻译,但没有覆盖官网文档的全部. 为迎合Unity VR的热潮与大家的学习需要,推出的针对Unity方向的官方文档翻译系列. 第三篇 <手型资源> 介绍了Leap Motion为Unity提供的资源包种的手型预设体资源. Hand Assets  手型资源 The Leap Motion core assets for Unity include a number of pre-made hand prefabs assets.

任何手型都能运用自如的鼠标

有没有想过,有一款游戏鼠标,能够根据手型的大小而变化,无论大小的手都能运用自如的鼠标,它不是由手来适应鼠标,而是变换来适应你的手掌和抓握的方式. 不要不相信,真有这么一款任何手都能运用的鼠标,再也不用担心鼠标大小不合适而使玩游戏不畅通,不爽快. 推荐这款手机,没有看重它其他一大堆的功能,而是看中了它适合任何手型,这真是第一次听说哦.每次玩游戏,都嫌弃鼠标太大,用的不爽,至从看到这款鼠标,以后再也不用担心啦. 现在在贝多分上分期,输入推荐码CS350,还有10元话费送哦!http://www.fe

CSS样式--移动划过超链接鼠标变手型详解

用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这15种效果的解释.移动鼠标到解释上面,看看你的鼠标起了什么变化吧!hand是手型pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用.crosshair是十字型text是移动到文本上的那种效果wait是等待的那种效果default是默认效果help是问号e-resize是向右的箭头ne-re

javascript,移动划过超链接鼠标变手型

用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这15种效果的解释.移动鼠标到解释上面,看看你的鼠标起了什么变化吧!hand是手型pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用.crosshair是十字型text是移动到文本上的那种效果wait是等待的那种效果default是默认效果help是问号e-resize是向右的箭头ne-re

css各种手型集合(css禁止手型)

写这篇博客前不得不先吐槽下国内的技术性文章现状: 1:在国内真心缺少技术性的文章: 2:用百度搜技术性的文章真心不靠谱: 好吧:正题:下面是在国外搜刮来的:比较齐全的鼠标手型css:在国内的网站上是搜不到这么全的:比如说哪个禁止的手型: 鼠标往下移动即可看到效果: html代码如下:<h1>Cursors</h1> <div class="cursors">    <div class="auto">auto</

7种鼠标悬停效果,多样的图片说明展示

今天我们要为您展示如何创建一些简单又不失时尚的图片说明悬停效果.我们的想法应用悬停效果来显示图片对应的标题,作者和链接按钮.对于一些的效果,我们将使用3D变换.这样做的目的是保持奇妙的效果,并为许多不同的变化提供了灵感. 在线演示      下载源码 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型

30种奇妙的鼠标悬停效果【附源码下载】

Web 界面上交互的方式很多,只要你去探索,你会发现很多让你眼前一亮的想法.Codrops 最近发布了一组悬停效果,总共分为两组,多达30种不同的风格.为了让效果尽可能的平滑,最好不要在元素上使用变换以免影响布局.第二组效果中采用了 SVG 动画,这也是目前比较流行的方式. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享

鼠标悬停图片移动的效果

当前很多购物网站,像京东,蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移,下移,左移或者右移效果, 实现代码很简单,就用css3的transform便可实现. 下列代码实现的是鼠标悬停,div向上移动30px,鼠标拿开div恢复原始位置. css: <style> div{ margin-top: 100px; width: 100px; height: 100px; background: pink; transition:All 0.4s ease-in-out;//让移动效果变得平滑自

HTML+CSS鼠标悬停效果

HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"> <a class="social" href="https://webbb.be" target="_blank"> <div class="front"> <i class="fa fa-facebook&q